私の所有者は、子コンポーネントの状態を更新できないようにコンポーネントの状態を反応していますか？

Question

私は、UIのボタンを介してマウントされたモーダル内のチェックボックスの状態を更新しようとしています。 AppWrapperがマウントされたときに設定をロードしているので、必要に応じてそれらを渡すことができます。今は、SettingsListコンポーネントに小道具として設定を渡しています.SetsListコンポーネントは、一連の子ノードをチェックボックスとしてレンダリングします。私はモーダルが開いているときにチェックボックスをクリックすることができ、設定は正常にデータベースに保存されます。しかし、モーダルが閉じられて再び開くと、設定は所有者から最初に設定された状態にリフレッシュされます。しかし、ページを更新すると、正確にチェックされたボックスが表示されます。それは私にとって理にかなっていますが、私はそれを解決する最良の方法が不明です。

子供の設定から親の状態を更新することができますか？ユーザーに変更が反映された小道具を渡した状態でモーダルを再オープンすると、構造を反応させるマイ

は次のようになります。

<AppWrapper> 
getInitialState {settings:[]} 
<Modal> 
    <SettingList settings={this.state.settings}> 
    <Setting/> 
    <SettingList/> 
<Modal/> 
<AppWrapper/> 

それは一つのコードに1、バスト階層のちょうど表現を指示していません。

私のモーダル・コンポーネントは、次のようになります。

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/

は私のためのソリューションでした。