Question

我有一个React Redux表单，其中包含一些必填字段，并且其初始值使用initialValues属性设置

这些值可以很好地初始化，但是当我尝试保存表单时会出错，提示必须填写该字段（即使其中有一个值）。如果我只是单击该字段，然后再次保存，一切都会正常！

我已经尝试过使用初始化/重置/销毁/更改/模糊/等方法找到的所有方法，可以手动触摸或将所有字段设置为无用

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

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

以及上述各种选项

如果我尝试重置并重新初始化表单或调用更改，则行为相同。如果我只是单击该字段，那么验证将按预期进行。

也尝试了enableReinitialize: true，但这也没有改变行为

initialValues是通过异步调用设置的，该调用会更新redux状态var，我想这是当前的问题。我一直无法使用任何mvp沙箱示例进行复制。

在字段中设置值就很好了，但是就像在设置initialValue之后，验证器只是不检查字段，除非用户在其中单击鼠标。

我怎么能告诉表单在其中已经有一个值，只需检查，而无需用户手动单击字段

-一些新信息

如果我手动触摸然后模糊该字段...验证会立即失败，而不是等待提交被按下，因此它确实必须认为输入内容没有任何值，直到单击鼠标为止

Answer 1

您似乎需要表单验证。以下是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)

祝你好运！

即使使用initialValues进行设置，React Redux Form也无法通过所需的验证

1 个答案:

submit.js

SubmitValidationForm.js