制御されたチェックボックスのチェック属性を変更する（React）

Question

私はReactを初めて利用しています。問題の解決方法を見つけるための正しい用語が不足している可能性があります。それは難しいことではありません。

私は一度に1つの質問を表示する簡単なアプリケーションを構築しています。 1つの質問に答えた後、次の質問が表示されます。

私は、3つのチェックボックスをレンダリングするコンポーネントQuestionを持っています。各チェックボックスは、質問にanswerを1つ表します。

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

私はこのようなコンポーネントが呼び出す私の主成分Quizインサイド

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

次の質問が表示されたら、私は3つすべてのチェックボを欲しいxesをもう一度オフにします。現在、彼らは以前に答えられた質問からチェック状態を覚えています。ドキュメントによれば

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

：Question成分に

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

のようなだけfalseに状態にcheckedAttrをリセットonNext機能で

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

として、チェックボックスの状態でそれらを使用してください。

Answer 2

このようなcomponentWillReceiveProps方法を使用するコンポーネントは、新しい小道具を受信して​​いるとき

componentWillReceivePropsが呼び出されます。このメソッドは初期レンダリングのために呼び出されません。

受信したステップをQuestionコンポーネントから取り出し、その状態を新しいQuestionに更新します。