javascript - 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