Reagiert mein Eigentümer auf den Komponentenstatus, sodass ich den Status der untergeordneten Komponente nicht aktualisieren kann?

Question

Ich versuche, den Status eines Kontrollkästchens innerhalb eines Modales zu aktualisieren, das über die Schaltfläche auf der Benutzeroberfläche bereitgestellt wird. Ich lade die Einstellungen, wenn AppWrapper mount, damit ich sie nach Bedarf weitergeben kann. Im Moment übergebe ich nur die Einstellungen als Requisiten an die SettingsList-Komponente, die dann eine Reihe von Kindknoten als Kontrollkästchen darstellt. Ich kann die Kontrollkästchen aktivieren, wenn das Modal geöffnet ist und die Einstellungen erfolgreich in der Datenbank gespeichert werden. Wenn das Modal geschlossen und erneut geöffnet wird, werden die Einstellungen jedoch vom Eigentümer auf den ursprünglich festgelegten Status aktualisiert. Das Aktualisieren der Seite zeigt jedoch die genau markierten Kästchen an. Das macht Sinn für mich, aber ich bin mir nicht sicher, ob sie es am besten lösen können.

Sollte ich/kann ich den Status des übergeordneten Elements von der untergeordneten Einstellung aktualisieren, so dass, wenn das Modal erneut geöffnet wird, die übergebenen Requisiten die Benutzeränderungen widerspiegeln?

meine Struktur reagieren sieht wie folgt aus:

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

Es ist nicht 12.59 Code Directs, Büste nur eine Darstellung der Hierarchie.

Meine Modal Komponente sieht wie folgt aus:

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

Meine SettingList Komponente wie folgt aussieht:

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

und die Einstellung Komponente sieht wie folgt aus:

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

Wie wies darauf hin, In den obigen Kommentaren gibt es mehrere Möglichkeiten, Daten zwischen Komponenten zu übergeben.

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

den Artikel Nach Rückrufe in Bezug war die Lösung für mich.