更改受控复选框的已检查属性（React） [英] Change checked attribute of controlled checkbox (React)

问题描述

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

I am new to React and am probably lacking the correct terminology to find a solution to my problem. It cannot be that hard.

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

I am building a simple app which displays a set of questions, one question at a time. After answering one question, the next question is shown.

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

I have a component Question that renders 3 checkboxes, each checkbox represents one possible answer to the Question.

{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>
  )
})}

在我的主要组件测验我打电话给像这样的组件：

Inside my main component Quiz I call the component like this:

<问题步骤= {this.state.step} question = {this.state.questions [this.state。 step]} setAnswer = {this.setAnswer} onNext = {this.onNext} isDisabled = {this.isDisabled（）} />

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

onNext is my function which increments this.state.step in order to display the next question:

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

一切正常，但是：当显示下一个问题时，我想要所有3个复选框可以再次取消选中。目前，他们还记得以前回答的问题中的检查状态。

Everything works fine, except: When the next question is displayed, I want all 3 checkboxes to be unchecked again. Currently they remember their checked state from the previously answered question.

推荐答案

所以React渲染其组件只有渲染更改的组件。由于重新渲染后复选框已检查属性没有任何变化，因此它们保持其先前状态。

So the thing is that React renders its components such that only the components that changed are rendered. Since nothing has changed about the checkboxes checked attribute after rerendering they stay in their previous state.

您应该做的是在<$ c $中点击复选框状态c> setAnswer function并将其作为prop组件传递给它。

What you should do is toggle the checkbox state on click in the setAnswer function and pass this as a prop to the Question component.

类似

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

通过它on like

Pass it on like

<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} />

在复选框状态中使用它们

Use them in the checkboxes state as

{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 function只是将状态 checkedAttr 重置为 false 。

In the onNext function just reset the states checkedAttr to false.

这篇关于更改受控复选框的已检查属性（React）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！