如何要求用户至少选择一个复选框才能提交表单？

Question

我有一个checkboxgroup 组件，我想对其进行一些输入验证。 在用户提交表单之前，至少需要选中一个复选框。

        <legend>Choose field names</legend>
        <CheckboxGroup
          checkboxDepth={5}
          name="fieldNames"
          value={this.state.fieldNames}
          onChange={this.fieldNamesChanged}
          required
        >
          {fields &&
            fields.map(field => {
              return (
                <li>
                  <Checkbox value={field.name} />
                  {field.name}
                </li>
              );
            })}

使用我目前在我的代码和框中的内容，可以在不选择任何复选框的情况下提交表单。 是否可以使用required属性来解决此问题，或者我是否需要跟踪此组件之外的选定框？

Answer 1

// include a value in your state defaults
this.state = {
  ...,
  submitDisabled: true
};

// update the value when a checkboxe's value changes
fieldNamesChanged = newFieldNames => {
    this.setState({
        ...,
        submitDisabled: !newFieldNames.length
    });
};

// use the state value to toggle the disabled property
<button
    ...
    disabled={this.state.submitDisabled}>
    Submit
</button>

这是一个演示。