mardi 30 août 2016

Change checked attribute of controlled checkbox (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.

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:

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

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

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.




Aucun commentaire:

Enregistrer un commentaire