Change checked Attribut der kontrollierten Checkbox (React)

Question

Ich bin neu zu Reagieren und fehlt wahrscheinlich die richtige Terminologie, um eine Lösung für mein Problem zu finden. Es kann nicht so schwer sein.

Ich baue eine einfache App, die eine Reihe von Fragen anzeigt, eine Frage nach der anderen. Nach Beantwortung einer Frage wird die nächste Frage angezeigt.

Ich habe eine Komponente Question, die 3 Kontrollkästchen darstellt, jedes Kontrollkästchen stellt eine mögliche answer auf die Frage.

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

In meinem Hauptkomponente Quiz Ich nenne die Komponente wie folgt aus:

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

onNext ist meine Funktion, die this.state.step um erhöht die nächste Frage angezeigt:

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

Alles funktioniert gut, außer: Wenn die nächste Frage angezeigt wird, möchte ich alle 3 Checkbo xes wieder deaktiviert werden. Momentan erinnern sie sich an ihren überprüften Zustand von der zuvor beantworteten Frage.

Answer 1

Die Sache ist, dass React seine Komponenten so rendert, dass nur die Komponenten gerendert werden, die geändert wurden. Da sich nach dem erneuten Rendern an den Checkbox-Checked-Attributen nichts geändert hat, bleiben sie in ihrem vorherigen Zustand.

Was Sie tun sollten, ist das Kontrollkästchen Kontrollkästchen bei Klick in der setAnswer Funktion und übergeben Sie dies als eine Stütze auf die Frage-Komponente.

So etwas wie

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

Pass auf wie

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

sie im Zustand Kontrollkästchen Verwendung als

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

In der onNext Funktion zurückgesetzt nur die Zustände checkedAttr-false.

Answer 2

Auf der Question Komponente verwenden, um die componentWillReceiveProps Methode wie folgt:

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

Nach der Dokumentation:

componentWillReceiveProps wird aufgerufen, wenn eine Komponente neue Requisiten empfängt. Diese Methode wird nicht für das anfängliche Rendern aufgerufen.

die empfangene Schritt von der Komponente Question Abruf- und seinen Zustand aktualisieren die neue Question zu zeigen.