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。

更改受控复选框的已检查属性（React）

2 个答案: