更改受控复选框的选中属性（反应）

Question

我是 React 新手，可能缺乏正确的术语来找到我的问题的解决方案。不可能那么难。

我正在构建一个简单的应用程序，它显示一组问题，一次一个问题。回答一个问题后，会显示下一个问题。

我有一个组件 Question 呈现 3 个复选框，每个复选框代表一个可能的 answer 问题。

{this.props.question.answers.map((answer, index) => {
  return (
    <li className="Question__answer" key={answer.id}>
      <label className="Question__answer-label">
        <input
          className="Question__answer-checkbox"
          type="checkbox"
          value={index}
          onChange={this.props.setAnswer}
          defaultChecked={false} />
        {answer.answer}
      </label>
    </li>

    ...

    <button className="Question__next" type="button" onClick={this.props.onNext} disabled={this.props.isDisabled}>
        Next question
      </button>
  )
})}

在我的主要组件Quiz 中，我这样调用组件：

<Question step={this.state.step} question={this.state.questions[this.state.step]} setAnswer={this.setAnswer} onNext={this.onNext} isDisabled={this.isDisabled()} />

onNext 是我的函数，它递增 this.state.step 以显示下一个问题：

onNext(event) {
    this.setState({step: this.state.step + 1});
}

一切正常，除了：当显示下一个问题时，我希望再次取消选中所有 3 个复选框。目前，他们记得之前回答的问题中的选中状态。

Answer 1

在Question 组件上使用componentWillReceiveProps 方法，如下所示：

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

根据文档：

componentWillReceiveProps 将在组件接收新道具时被调用。初始渲染不调用此方法。

从Question 组件中获取接收到的步骤并更新其状态以显示新的Question。

Answer 2

所以事情是 React 渲染它的组件，这样只有改变的组件才会被渲染。由于重新渲染后复选框的选中属性没有任何变化，因此它们保持以前的状态。

您应该做的是在单击setAnswer 函数时切换复选框状态，并将其作为道具传递给问题组件。

类似

this.state {
   checkedAttr: ["false", "false", "false"]
} 

转发一下

<Question step={this.state.step} question={this.state.questions[this.state.step]} setAnswer={this.setAnswer} onNext={this.onNext} isDisabled={this.isDisabled()} checkedAttr={this.state.checkedAttr} />

在复选框状态下使用它们

{this.props.question.answers.map((answer, index) => {
  return (
    <li className="Question__answer" key={answer.id}>
      <label className="Question__answer-label">
        <input
          className="Question__answer-checkbox"
          type="checkbox"
          value={index}
          checked={this.props.checkedAttr[index]}
          onChange={this.props.setAnswer}
          defaultChecked={false} />
        {answer.answer}
      </label>
    </li>

    ...

    <button className="Question__next" type="button" onClick={this.props.onNext} disabled={this.props.isDisabled}>
        Next question
      </button>
  )
})}

在onNext 函数中，只需将状态checkedAttr 重置为false。