Redux表单复选框验证

Question

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

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

Answer 1

您可以为该Field组件创建一个自定义组件。在自定义组件中，您将收到错误道具，因此您可以处理其他样式，错误消息等。如果要在提交时进行验证，请将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)