從父母狀態刷新兒童狀態React

我有一個包含一些數據的表，並且表中的每個元素都是一個React類組件。它看起來像這樣：從父母狀態刷新兒童狀態React

Table

我要的是有一個複選框「檢查所有」功能（左上覆選框）。事情是我不知道如何解決，因爲props和state。

我一樣，在單個元素組件代碼：

getInitialState: function() { 
    return { component: this.props.data }; 
    }, 

render: function() { 
    var data = this.state.component; 
    data = data.set('checked', this.props.data.get('checked')); 
    ... 
}

而且我知道我不應該props得到checked PARAM但它僅僅是暫時的。

我有什麼問題是：當我更新checked param在父母它不更新狀態，因爲getInitialState不刷新後（是的，我知道它應該是這樣）。

我的問題是：我可以以某種方式更新子組件的狀態嗎？或者它是更好的方式來實現這一點。

來源

2015-04-24 Tomasz Kasperek

我的做法是，你應該有結構像這樣在父母的渲染：

<ParentView> 
{ this.props.rows.map(function(row) { 
    <ChildRow props={row.props} /> 
    }).bind(this) 
} 
</ParentView>

，然後row.props你當前行項目是否被選中與否的信息。當父級複選框被切換時，您將使用狀態填充所有row.props。

兒童，您會收到那些componentWillReceiveProps和你做魔術（例如設置正確的狀態）時複選框被觸發：

componentWillReceiveProps: function(props) { 
    this.setState({isChecked: props.isChecked}); 
}

（信息來自陣營的文檔：調用this.setState（）這個函數中不會引發額外的渲染）

子元素的渲染會是這樣的：

<div> 
    <input type='checkbox' checked={this.state.isChecked} /> 
    <label>{this.props.label}</label> 
</div>

來源

2015-04-24 13:45:44 zvona

除非您非常小心，否則最終可能會與孩子爭奪父母以控制其狀態。恕我直言，最好讓孩子無國籍，並由道具驅動。父母可以控制所有孩子的選中狀態。 – edoloughlin

@edoloughlin謝謝你的評論，它拯救了我的生命。 –

您可以通過將所有子元素的選中狀態僅存儲在父級中來解決此問題。孩子們只根據道具設置他們的檢查狀態（他們不使用狀態），並調用父母提供的回調來改變它。

例如，在孩子：

render: function() { 
    //... not showing other components... 
     <input type="checkbox" 
       value={this.props.value} 
       checked={this.props.checked} 
       onClick={this.props.onClick}> 
}

家長提供的onClick，這改變了孩子的檢查情況在其狀態，並將此回，當孩子重新呈現。

在父：

getInitialState: function() { 
    return { 
     allChecked: false, 
     childrenChecked: new Array(NUM_CHILDREN) // initialise this somewhere (from props?) 
    } 
}, 

render: function() { 
    return <div> 
       <input type="checkbox" checked={this.state.allChecked}> 
       {children.map(function(child, i) { 
        return <Child checked={this.state.childrenChecked[i]} 
           onClick={function(index) { 
            return function() { 
             // update this.state.allChecked and this.state.childrenChecked[index] 
            }.bind(this) 
           }.bind(this)(i)} 
          /> 
       }).bind(this)} 
      </div>; 
}

- 不檢查錯別字等

來源

2015-04-24 13:52:52 edoloughlin

這似乎是我最習慣的反應/助焊劑解決方案 –

是的，非常習慣 –

請參閱react documentation上提升狀態向上。在您的孩子組件中，您需要使用道具。要更新道具，您需要提供父級的更新功能。

來源

2017-11-30 00:02:36

從父母狀態刷新兒童狀態React

回答

相關問題