在 React 中，如何检查是否至少选择了一个复选框

Question

我用React 编写了一个Checkbox 组件，它被重用于生成复选框列表。我知道反应元素在状态方面与DOM 不同。但是如何检查用户在React 提交的表单中是否至少选择了1个复选框？

我在 SO 和 Google 中搜索过，但所有示例都使用 jQuery 或 vanilla JS。对于我的情况，我想要一个 React 示例。

组件

const Checkbox = ({ title, options, id, name, onChange }) => {
  return (
    <div className="checkbox-group">
      <h4>{title}</h4>
      {options.map(option => (
        <label htmlFor={`${name}-${index}`} key={`${name}-${index}`}>
          <input
            type="checkbox"
            name={name}
            value={option}
            onChange={onChange}
            id={`${name}-${index}`}
          />
          <span> {option}</span>
        </label>
      ))}
    </div>
  );
};

class Form extends Component {

  ...

  handleChange(event) {
    let newSelection = event.target.value;
    let newSelectionArray;

    newSelectionArray = [
      ...this.state.sureveyResponses.newAnswers,
      newSelection,
    ];

    this.setState(prevState => {
      return {
        surveyResponse: {
          ...this.state.surveyResponse,
          newAnswers: newSelectionArray,
      }
    )
  }

  handleSubmit() {
    // I'm guessing this doesn't work in React as it's using its own state!
    let checkboxes = document.querySelectorAll('[name="quiz-0"]:checked');

    for (let chk in checkboxes) {
      if (chk.checked) {
        return true;
      }
    }

    alert('Please choose at least one answer.');
    return false;
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <h4>Choose</>
        {this.state.surveyQuiz.map((quiz, index) => {
          return (
            <div key={index}>
              <Checkbox
                title={quiz.question}
                options={quiz.answers}
                name={`quiz-${index + 1}`}
                onChange={this.handleChange}
              />
            </div>
          );
        })};
        <button>Save answer(s)</span>
      </form>
    );
  }
}

当用户提交表单时，它应该检查是否至少有一个复选框被选中，如果没有被选中则阻止表单提交，即返回 false！

Answer 1

您还应该将checked 属性保持在surveyResponse.newAnswers 状态。然后，您将能够检查其中是否有任何一个是true。例如：

const nA = this.state.surveyResponse.newAnswers
const isChecked = nA.some(c => c.checked == true)

if(isChecked) {
  //...if any of them has checked state
}

假设示例newAnswers数据：

[
  {answer:'foo', checked: false},
  {answer:'bar', checked: true},
  ...
]

Answer 2

以下显示如何更改您的 handleSubmit 以读取表单数据：

handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const data = new FormData(form);
    for (let name of data.keys()) {
      const input = form.elements[name];
      console.log(input);
      console.log('value:', input.value);
    }
}