Question

我正在尝试更新通过UI上的按钮挂载的模式中的复选框的状态。当AppWrapper安装时我正在加载设置，所以我可以根据需要传递它们。现在我只是将设置作为props传递给SettingsList组件，然后将一系列子节点呈现为复选框。当模态打开时，我可以单击复选框，并且设置成功保存到数据库。但是，当关闭模式并重新打开时，设置将从所有者刷新到初始设置状态。刷新页面虽然显示准确选中的框。这对我来说很有意义，但我不确定他们是解决问题的最佳方法。

我是否可以从子设置更新父级的状态，以便在重新打开模式时传递的props会反映用户的更改？

我的反应结构如下：

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

Answer 1

正如上面的评论中所指出的，有许多方法可以在组件之间传递数据。

http://andrewhfarmer.com/component-communication/

关于回调的文章是我的解决方案。

我的所有者是否反应组件状态阻止我更新子组件状态？

1 个答案: