ReactJS: Interkommunikation zwischen zwei dropdowns

Question

Ich versuche, zwei Dropdown-Menüs in ReactJS-Komponente zu entwickeln, die zweiten Dropdown-Werte hängen vom ersten Dropdown-Wert ab. Wenn sich der erste Dropdown-Wert ändert, ändern sich die zweiten Dropdown-Werte basierend auf dem ersten Dropdown-Wert. Wie Länder und Staaten. Das folgende ist das Code-Snippet. kannst du mir helfen, wie man es umsetzt?

Dank

<script type="text/jsx"> 
/*** @jsx React.DOM */ 
var data = [ 
    {key:"eStatements", value:"eStatements"}, 
    {key: "mobileApp", value:"Mobile App"}, 
    {key: "billPay", value:"Bill Pay"}, 
    {key: "remoteDeposit", value:"Remote Deposit"}, 
    {key: "onlineBanking ", value:"Online Banking"}, 
    {key: "P2P", value:"P2P"} 
]; 
var myOptions = []; 

var DropdownApp = React.createClass({ 
    render:function(){ 
    return (
     <div> 
     <SelectApp data={this.props.data} name={this.props.name}/> 
     </div> 

    ); 
    } 
}); 

var SelectApp = React.createClass({ 
    getInitialState:function(){ 
     return {myOptions : {"signUp" : "Sign Up"}}; 
    }, 
    handleSelectChange : function(e){ 
     var product = e.target.value; 
     if("eStatements" == product) { 
     myOptions = [{key: "signUp" , value: "Sign Up"}]; 
     } else if("Mobile App" == product) { 
     myOptions = [{key: "noOfLogins" , value: "Number of Logins"}]; 
     } else if("Bill Pay" == product) { 
     myOptions = [{key: "noOfPayments" , value: "Number of Payments"},{key: "addNewPayeeAndPay" , value: "Add New Payee"}]; 
     } else if("Remote Deposit" == product) { 
     myOptions = [{key: "noOfDeposits" , value: "Number of Deposits"}]; 
     } else if("Online Banking" == product) { 
     myOptions = [{key: "noOfLogins" , value: "Number of Logins"}]; 
     }else if("P2P" == product) { 
     myOptions = [{key: "noOfPayments" , value: "Number of Payments"}, {key: "addNewPayeeAndPay" , value: "Add New Payee"}]; 
     } 
     this.setState({myOptions: myOptions}); 
    }, 
    render: function(){ 
     var opt = this.props.data.map(function(d){ 
     return (<OptionsApp key={d.key} value={d.value}/>); 
     }); 
     return (
      <div> 
      <div> 
      <select name={this.props.name} id={this.props.name} onChange={this.handleSelectChange}> 
      {opt}; 
      </select> 
      </div> 
      <div> 
      <select name={this.state.myOptions} > 
      {opt}; 
      </select> 
      </div> 
      </div> 
     ); 
     } 
    }); 

    var OptionsApp = React.createClass({ 
     render : function(){ 
      return (
       <option value={this.props.key}> {this.props.value}</option> 
     ); 
     } 
    }); 
React.renderComponent(<DropdownApp data={data} name="my name"/>, document.getElementById("dropDown")) 

</script> 

Answer 1

Wenn zwei Komponenten kommunizieren müssen, die ein Zeichen dafür sein kann, dass sie Geschwister sein sollte.

Wenn Sie mehrere Komponenten in eine übergeordnete Komponente einschließen, können Sie einige der oben genannten Strategien in Kombination verwenden, um die Kommunikation zwischen ihnen zu erleichtern. leicht als Objekt

class ParentComponent extends React.Component { 
    render() { 
    return (
     <div> 
     <SiblingA 
      myProp={this.state.propA} 
      myFunc={this.siblingAFunc.bind(this)} 
      /> 
     <SiblingB 
      myProp={this.state.propB} 
      myFunc={this.siblingBFunc.bind(this)} 
      /> 
     </div> 
    ); 
    } 
    // Define 'siblingAFunc' and 'siblingBFunc' here 
} 

http://andrewhfarmer.com/component-communication/#5-parent-component