0
我試圖更新通過UI上的按鈕安裝的模式內的複選框的狀態。我在AppWrapper安裝時加載設置，以便可以根據需要傳遞它們。現在，我只是將設置作爲道具傳遞給SettingsList組件，然後將一系列子節點呈現爲複選框。當模式打開時，我可以點擊複選框，設置成功保存到數據庫。但是，當模式關閉並重新打開時，設置會刷新爲來自所有者的初始設置狀態。刷新頁面顯示精確選中的框。這對我來說很合理，但我不確定他們解決問題的最佳方式。我的所有者反應組件狀態是否阻止我更新子組件狀態？
我應該/我可以更新父設備的狀態從兒童設置，所以當模式重新開放，通過道具反映用戶的變化？
我的反應結構是這樣的：
<AppWrapper>
getInitialState {settings:[]}
<Modal>
<SettingList settings={this.state.settings}>
<Setting/>
<SettingList/>
<Modal/>
<AppWrapper/>
它不是直接的一一對應的代碼，胸圍層次的只是一種表象。
我的模態分量是這樣的：
var Modal = React.createClass({
render: function() {
if(this.props.isOpen){
return (
<ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
<div className="mymodal">
{this.props.children}
</div>
</ReactCSSTransitionGroup>
);
} else {
return <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={500} />;
}
}
});
我SettingList組件看起來是這樣的：
var SettingsList = React.createClass({
render: function() {
var settingNodes = this.props.settings.map(function(setting, i){
return (
<Setting data={setting}
key={i}>
</Setting>
)
}.bind(this));
return (
<div className="settings-block">
<h2>Notifications</h2>
<ul className="account-settings">
{settingNodes}
</ul>
</div>
)
}
});
和設置組件看起來是這樣的：
var Setting = React.createClass({
saveSetting: function(one) {
core.setAccountSettings(this.refs.setting_checkbox.id, this.refs.setting_checkbox.checked).done(function(response){
this.setState({
defaultChecked: this.refs.setting_checkbox.checked
};
console.log(response)
}.bind(this));
},
render: function() {
//get values from settings object
for (var k in this.props.data) {
this.settingId = k
this.settingName = String(k.split(/_(.+)?/)[1]).replace(/_/g, " ");
this.settingValue = (this.props.data[k].toLowerCase() == "true")
}
return (
<li className="checkbox">
<input onChange={this.saveSetting} ref="setting_checkbox" id={this.settingId} className="settings_checkbox" type="checkbox" defaultChecked={this.settingValue}></input>
<label htmlFor={this.settingName}>{this.settingName}</label>
</li>
)
}
});
你的代碼有幾個問題：例如'defaultChecked'永遠不會被使用，你也在修改'this'裏面的渲染（你可以使用局部變量），ReactCSSTransitionGroup應該包裝所有東西。但是你的問題的核心是'this.state.settings'沒有更新。您可以使用回調來通知更新設置的父組件，或者使用flux/redux/mobx存儲來維護狀態。 –
我讀過一些關於flux和redux的內容。我想我會在繼續前進一步研究REDX。感謝您的見解。 – DigitalDisaster
您是否介意進一步解釋回調方法，或鏈接到某些文檔以獲取更多詳細信息？ – DigitalDisaster