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

Question

我刚接触 React，可能缺乏正确的术语来解决我的问题。这不应该很难。

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

我有一个名为 Question 的组件，它呈现了 3 个复选框，每个复选框代表问题的一个可能 答案。

{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个复选框再次取消选中。当前，它们会记住先前回答的问题中的选中状态。

- maze

---

可能是重复的问题，关于如何使用redux从深度嵌套的子组件中调用父组件中的函数。原链接：http://stackoverflow.com/questions/37091627/how-to-invoke-a-function-in-parent-component-from-deeply-nested-child-component - Md.Estiak Ahmmed

Answer 1

事实是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。

- Shubham Khatri

---

@maze 很高兴能帮忙 :) - Shubham Khatri

Answer 2

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

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

根据文档：

当组件接收到新的 props 时，将调用 componentWillReceiveProps 方法。该方法不会在初始渲染时被调用。

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

- Mani Shooshtari

---

谢谢您的回答！那么我应该在我的“Questions”组件中引入一个状态吗？我认为最好的做法是保持这个组件无状态，并通过从父级“Quiz”组件传递所有信息到它的props。我不太确定如何实现您的建议。 - maze

@maze 当然可以！但在这种情况下，您的问题组件会随着每个步骤的更改而不断变化，因此您应该拥有多个无状态的“Question”或一个单一的有状态的“Question”。 - Mani Shooshtari

所以，我将this.state.step添加到“Question”组件中；然后在componentWillReceiveProps(nextProps) { this.setState({step: nextProps.step });中设置状态，但结果仍然相同：问题确实会改变，但复选框会记住它们之前的状态... 我做错了什么？ - maze