Javascript ReactJS：两个下拉列表之间的交互

我试图在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>

/***@jsx React.DOM*/
风险值数据=[
{键：“eStatements”，值：“eStatements”}，
{key:“mobileApp”，value:“mobileApp”}，
{key:“billPay”，value:“billPay”}，
{键：“远程存款”，值：“远程存款”}，
{键：“网上银行”，值：“网上银行”}，
{key:“P2P”，value:“P2P”}
];
var myOptions=[]；
var DropdownApp=React.createClass({
render:function（）{
返回(
);
}
});
var SelectApp=React.createClass({
getInitialState:函数（）{
返回{myOptions:{“注册”：“注册”}；
},
handleSelectChange:功能（e）{
var乘积=e.目标值；
如果（“资产”==产品）{
myOptions=[{key:“signUp”，value:“signUp”}]；
}else if（“移动应用程序”==产品）{
myOptions=[{key:“noOfLogins”，value:“登录次数”}]；
}否则，如果（“账单支付”==产品）{
myOptions=[{key:“noOfPayments”，value:“付款数量”}，{key:“addnewpayeandpay”，value:“addnewpaye”}]；
}否则如果（“远程存款”==产品）{
myOptions=[{key:“noofdeposities”，value:“存款数量”}]；
}else if（“网上银行”==产品）{
myOptions=[{key:“noOfLogins”，value:“登录次数”}]；
}else if（“P2P”==产品）{
myOptions=[{key:“noOfPayments”，value:“付款数量”}，{key:“addnewpayeandpay”，value:“addnewpaye”}]；
}
this.setState（{myOptions:myOptions}）；
},
render:function（）{
var opt=this.props.data.map（函数（d）{
返回（）；
});
返回(
{opt}；
{opt}；
);
}
});
var OptionsApp=React.createClass({
render:function（）{
返回(
{this.props.value}
);
}
});
React.renderComponent（，document.getElementById（“下拉列表”））

如果两个组件需要通信，这可能表明它们应该是兄弟

如果在父组件中封装多个组件，则可以结合使用上述一些策略来促进它们之间的通信

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 
}

类ParentComponent扩展了React.Component{ render（）{ 返回( ); } //在此处定义“siblingAFunc”和“siblingBFunc” }

---

如果两个组件需要通信，这可能表明它们应该是兄弟

如果在父组件中封装多个组件，则可以结合使用上述一些策略来促进它们之间的通信

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 
}

类ParentComponent扩展了React.Component{ render（）{ 返回( ); } //在此处定义“siblingAFunc”和“siblingBFunc” }

---

如果您的选项像国家和州一样相互依赖，那么您可以轻松地将数据作为对象进行结构化。以国家（例如）为键，每个国家（例如）以国家（例如）为值的数组。第一个选择然后呈现来自

Object.keys（数据）

的值，第二个选择呈现相应的值

data[key]

。只需在第一个选项的

onChange

上更新第二个选项。如果您的选项像国家和州一样相互依赖，您可以轻松地将数据构造为对象。以国家（例如）为键，每个国家（例如）以国家（例如）为值的数组。第一个选择然后呈现来自

Object.keys（数据）

的值，第二个选择呈现相应的值

data[key]

。只需在第一个的

onChange

上更新第二个。