Question

在使用带有React的redux-form时，我遇到的问题是没有显示错误消息以进行字段级输入验证。

以下是该组件的相关代码：

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

你也可以像这样提供验证

{"message":"Route is not bound.",
"status_code":500,
"debug":{"line":8614,"file":"C:\\wamp64\\www\\his-word\\his_word_api\\bootstrap\\cache\\compiled.php","class":"LogicException","trace":["#0 C:\\wamp64\\www\\his- ....}

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

2 个答案: