React Redux Form не проходит обязательную проверку, даже если задано initialValues - PullRequest
Новая
       2

React Redux Form не проходит обязательную проверку, даже если задано initialValues

2 голосов
/ 07 марта 2020

У меня есть React Redux Form, в которой есть несколько обязательных полей, и ее начальные значения установлены с initialValues ​​prop

Значения инициализируются нормально, но когда я пытаюсь сохранить форму, она выдает ошибку, говоря, что поле является обязательным (хотя там есть значение). Если я просто нажимаю на поле, затем сохраняю снова, все работает отлично!

Я попробовал все возможные способы, используя initialize / reset / destroy / change / blur / et c, чтобы вручную коснуться или установить поле все безрезультатно 

reduxForm({
    form: 'formName',
    touchOnChange: true,
    touchOnBlur: true
}),

useEffect(() => {
    if (initialValues && initialValues.field) {
        change(field, value)
        blur(field, value)
    }
}, [initialValues])

и целый ряд различных опций, как указано выше

То же поведение, если я пытаюсь сбросить и повторно запустить форму или вызвать изменение. Если я просто нажму на поле, тогда проверка пройдет, как и ожидалось.

Также попытался enableReinitialize: true, но это также не изменило поведение

initialValues устанавливается через asyn c вызов, который обновляет избыточное состояние var, я думаю, это проблема под рукой Мне не удалось воспроизвести ни с одним из примеров песочницы mvp.

Значения в полях устанавливаются очень хорошо, но это похоже на то, что валидаторы просто не проверяют поле после установки initialValue, если только пользователь выполняет щелчок мышью по ним.

Как я могу сказать форме, что там уже есть значение, просто проверьте, не нажимая вручную на поле

- некоторая новая информация

Если я коснусь поля, а затем размываю поле ... проверка завершится неудачно сразу же, вместо того, чтобы ждать нажатия кнопки подтверждения, поэтому действительно нужно думать, что во входных данных нет значения до тех пор, пока не будет нажата кнопка мыши

1 Ответ

0 голосов
/ 17 марта 2020

Похоже, вам нужна проверка формы. Ниже приведен пример проверки формы / формы от https://redux-form.com/6.0.1/examples/submitvalidation/.

submit. js

import { SubmissionError } from 'redux-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

function submit(values) {
  return sleep(1000) // simulate server latency
    .then(() => {
      if (![ 'john', 'paul', 'george', 'ringo' ].includes(values.username)) {
        throw new SubmissionError({ username: 'User does not exist', _error: 'Login failed!' })
      } else if (values.password !== 'redux-form') {
        throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' })
      } else {
        window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
      }
    })
}

export default submit

SubmitValidationForm. js

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import submit from './submit'

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

const SubmitValidationForm = (props) => {
  const { error, handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit(submit)}>
      <Field name="username" type="text" component={renderField} label="Username"/>
      <Field name="password" type="password" component={renderField} label="Password"/>
      {error && <strong>{error}</strong>}
      <div>
        <button type="submit" disabled={submitting}>Log In</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'submitValidation'  // a unique identifier for this form
})(SubmitValidationForm)

Удачи!

...