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

ReactJS：两个下拉菜单之间的相互通信

1 个答案: