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 函数中，检查复选框是否被选中，如果没有 - 使用 Field:

的名称抛出 SubmissionError

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

  console.log('Form submitted')
}

修饰表格：

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

Redux 表单复选框验证

Redux Form Checkbox Validation

validation

reactjs

redux-form