reactjs - Redux 表单复选框验证

Question

我有以下代码。该复选框用于确认用户已阅读条款和条件。我不确定如何在前端为此添加验证。即，如果用户在未选中此框的情况下单击“提交”，我想以某种方式突出显示此文本，让用户知道同意条款。

<Field
    label='Terms'
    name="terms-and-conditions"
    type="checkbox"
    component={this.renderField}
    submissionErrors={this.state.submissionErrors}
/>

Answer 1

您可以为 Field 组件创建自定义组件。在自定义组件中，您将收到 error 属性，以便您可以使用其他样式、错误消息等进行处理。如果您想在提交时进行验证，请将 onSubmit 属性传递给装饰组件。

实例:https://codesandbox.io/s/207mj8k3py

使用错误逻辑创建自定义组件:

const Checkbox = ({ input, meta: { touched, error } }) => (
  <div style={{ border: touched && error ? "1px solid red" : "none" }}>
    <input type="checkbox" {...input} />
    <label>Terms and conditions</label>
  </div>
)

将 Field 的 component 属性设置为 Checkbox:

const SimpleForm = ({ handleSubmit, onSubmit }) => (
  <form onSubmit={handleSubmit(onSubmit)}>
    <Field
      name="termsAndConditions"
      component={Checkbox}
    />
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
)

在 onSubmit 函数中，检查复选框是否已选中，如果没有，则抛出 SubmissionError 以及 Field 的名称:

const onSubmit = values => {
  if (!values.termsAndConditions) {
    throw new SubmissionError({ 
      termsAndConditions: 'Field required' 
    })
  }

  console.log('Form submitted')
}

装饰表单:

export default reduxForm({
  form: "simple",
  onSubmit
})(SimpleForm)