Question

我已经编写了以下组件以生成两个下拉列表，其中dllProducts依赖于ddlCategories，但问题是将所选的产品类别值传递给函数（）getDataById它不会收到所以我删除了代码。在函数ddlPordCatsChanegeEvent()中，我添加了评论。如果没有正确的方法来生成getDataById()

，这是调用函数ddlProducts的正确位置吗？

var gdata=[];

var trStyle = {
    'color': 'black',
    'border-style' :'solid',
    'margin-left':'20%'
};

var TWODROPDOWNCOMP = React.createClass({
    getInitialState:function(){
    return{data1:[], data2:[], isMounted:false, selectedValue:0}
},
componentDidMount:function(){
    this.getData();
    this.setState({isMounted:true})
},
ddlProdCatsChanegeEvent: function(e) {

    if (this.state.isMounted)
    {
        var newV = ReactDOM.findDOMNode(this.refs.refProdCats).value;
        var seleValue = newV;

        this.setState({selectedValue:newV}, function(){
            alert(this.state.selectedValue);

            //HOW DO I POPULATE THE OTHER DROPDOWN WITH ID ddlProducts using the child component PRODOPTIONS 
        });

    }
},
render: function() {
    var prodCats = this.state.data1.map(function(ele, index){
        return <PRODCATSOPTION optValue={ele.ProductCategoryID} optText={ele.Name} />
    });

    prodCats.unshift(<PRODCATSOPTION optValue={''} optText={'--- select category ----'} />)

    return (<div>Prodcut Category:<br /><select id="ddlCategories"  ref="refProdCats" onChange={this.ddlProdCatsChanegeEvent}>{prodCats}</select><br />
        Products:<br /><select id="ddlPorducts" ref="refProds"></select><br /></div>
      )
},
getDataById:function(catId){
    var x = catId;
    alert('rec id:'+x);

    $.ajax({
        url:'http://localhost:33401/Home/GetProductCats?id='+ x,
        method:'GET',
        success:function(d1){
            this.setState({data2:d1});
        }.bind(this),
        error:function(){
            alert('ERROR');
        }.bind(this)
    })
},
getData:function(){
    //ajax here
    $.ajax({
        url:'http://localhost:33401/Home/GetProductCats',
        method:'GET',
        success:function(d1){
            this.setState({data1:d1});
        }.bind(this),
        error:function(){
            alert('ERROR');
        }.bind(this)
    })
}
});

var PRODOPTIONS = React.createClass({
    render:function(){
        return(<option value={this.props.optValue}>{this.props.optText}</option> )
    }

});

var PRODCATSOPTION = React.createClass({
    render:function(){
        return(<option value={this.props.optValue}>{this.props.optText}</option> )
    }

});




ReactDOM.render( <TWODROPDOWNCOMP/>,  document.getElementById('d1') );

Answer 1

应该按照通常的方式填充选择。在AJAX调用之后，出现了选项。

<select id="ddlPorducts" ref="refProds">
  {this.state.data2.map(opt => (
    <option value={opt}>{opt}</option>
  ))}
</select>

如何从另一个下拉列表中填充一个下拉列表

1 个答案: