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