ReactJS：2つのドロップダウン間の相互通信

Question

ReactJSコンポーネントで2つのドロップダウンを開発しようとしています.2番目のドロップダウン値は最初のドロップダウン値に依存します。 最初のドロップダウン値が変更された場合、2番目のドロップダウン値は最初のドロップダウン値に基づいて変更されます。国や国のように。 コードスニペットは次のとおりです。実装方法を教えてください。

おかげ

<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

二つの成分は、彼らが兄弟であるべき徴候である可能性がありますこと、通信する必要がある場合。

親コンポーネントに複数のコンポーネントをラップする場合、上記の戦略のいくつかを組み合わせて使用​​して、それらの間の通信を容易にすることができます。

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