更改檢查屬性（反應）

Question

我是新來的反應，我可能缺乏正確的術語，以找到一個解決我的問題。它不是那麼難。

我建立一個簡單的應用程序，它會顯示一組問題，每次一個問題。回答完一個問題後，顯示下一個問題。

我有一個組件Question呈現3個複選框，每個複選框代表一個可能的answer問題。

{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個checkbo xes會再次被取消選中。目前他們還記得他們之前回答的問題。

Answer 1

所以事情是，陣營呈現其組件，使得只有改變了組件呈現。既然一切都沒有改變關於重新描繪他們留在自己以前的狀態後，選中屬性的複選框。

你應該做的是切換上點擊複選框狀態在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。

Answer 2

在Question組件使用componentWillReceiveProps方法是這樣的：

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

根據該文檔：

componentWillReceiveProps將被調用當組件接收新的道具。此方法不用於初始渲染。

從Question組件獲取收到的步驟並更新其狀態以顯示新的Question。