javascript - 在 React 中如何更新数组中的多个复选框值？

Question

表单针对特定问题有多个复选框。是否有任何选项可以将选定的值放入一个数组中，例如 {questionID: 4, answerValues: [1, 3,4]} ，它基于 onChange

  onChange(event) {
    const question = event.target.dataset.questionId;
    const result = event.target.value;
    let newAnswer = {
      questionID: question,
      answerValues: [result]
    };

    console.log(newAnswer);
    //this.props.updateAnswer(newAnswer);
  }

演示:https://codesandbox.io/s/mm49vkx62p

Answer 1

我会在 InputCheckbox 中创建一个属性来跟踪 selected 答案，并在每次勾选复选框时发出那些 selected :

class InputCheckbox extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.selected = {};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event, optionID) {
    if (event.target.checked) {
      this.selected[optionID] = true;
    } else {
      delete this.selected[optionID];
    }
    this.props.onChange({
      questionID: this.props.questionID,
      answerValues: Object.keys(this.selected)
    });
  }

在render()中:

        <input
          name={name}
          id={`${name}-${option.id}`}
          type="checkbox"
          value={option.id}
          onChange={e => this.handleChange(e, option.id)} // important

在表单中，event 参数现在包含(来自上面的 this.props.onChange())如下内容:

    {
      questionID: 4,
      answerValues: [1,2,5]
    }

代码沙盒:https://codesandbox.io/s/21zk2xy42n?module=%2Fsrc%2FInputCheckbox.js

JSKY，还有其他方法可以做到这一点(比如将选定的数组保留在父级中并将其传递给子级，而子级在 tick 时只发出 change 事件)。这只是众多可能方法中的一种。