Redux-Form 字段级验证：为什么不显示错误消息？

Question

在将 redux-form 与 React 结合使用时，我遇到了一个问题，即未显示字段级输入验证的错误消息。

以下是组件的相关代码：

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

const required = value => {
  console.log("required");
  return value ? undefined : 'Required';
};

const Question = props => {
  const { handleSubmit, onBlur, question, handleClick } = props;    
  return (
    <div className={`question question-${question.name}`}>
      <form className={props.className} onSubmit={handleSubmit}>
        <div className='question-wrapper'>
          <label className={`single-question-label question-label-${question.name}`}>{question.text}</label>
          <Field
            component={renderField}
            type={question.type}
            name={question.name}
            placeholder={question.placeholder}
            onBlur={onBlur}
            validate={required}
          />
        </div>
      </form>
    </div>
  )
}

export default reduxForm({
  form: 'quiz',
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
})(Question);

当我测试它时，我看到在控制台中调用了 UPDATE_SYNC_ERRORS 操作，并且 console.log("required"); 也出现了。但是当我导航到下一个问题时，我既没有在屏幕上看到错误消息，也没有在使用 DevTools 检查组件时看到任何证据。

我一直在关注 redux-form 文档中显示的字段级验证示例：http://redux-form.com/6.7.0/examples/fieldLevelValidation/

知道是什么原因造成的吗？提前致谢！

Answer 1

嗯，你必须写一个 validate 函数，然后像这样将它传递给 reduxForm 帮助器或包装器。 Redux-form 会在提交表单之前将所有表单值传递给此函数。

function validate(values) {
  const errors = {};

  // Validate the inputs from 'values'
  if (!values.name) {
    errors.name = "Enter a name!";
  }

   ...

  return errors;
}

export default reduxForm({
  validate,
  form: 'QuestionForm'
})(
  connect(null, { someAction })(Question)
);

希望这对您有所帮助。编码愉快！

Answer 2

你也可以像这样提供验证

const formOptions = {
  form: 'yourformname',       
  validate: validatefunctionname,redux-form
};

Redux-Form 字段级验证：为什么不显示错误消息？

Redux-Form Field-Level Validation: Why aren't the error messages showing?

validation

reactjs

redux

redux-form