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

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

因此，事实是React渲染了其组件，从而仅渲染了更改的组件。由于重新渲染后复选框的checked属性没有任何变化，因此它们保持其先前状态。

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

就像是

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。