Question

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

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

Answer 1

您可以为Field组件创建自定义组件。在自定义组件中，您将收到错误道具，以便您可以使用其他样式，错误消息等进行处理。如果要在提交时进行验证，请将onSubmit prop传递给已修饰的组件。

实例：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>
)

将字段的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)

Redux表单复选框验证

1 个答案: