ReactJS: взаимосвязь между двумя выпадающими списками

Question

Я пытаюсь разработать два выпадающих списка в компоненте ReactJS. Второе значение выпадающего списка зависит от первого значения выпадающего списка. Если первое значение выпадающего значения изменяется, значения второго раскрывающегося списка изменяются в зависимости от первого значения выпадающего списка. Как страны и государства. Ниже приведен фрагмент кода. можете ли вы помочь мне в реализации.

Благодаря

<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