0
我写了以下组件来生成两个下拉框,其中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'));
但在我的情况选项也作为一个组件。创建一个下拉列表,当一个将用于创建一个父组件和包括
React是声明式的。所以,所有渲染都会发生。 DOM中显示或隐藏的内容由状态和道具控制。 – vijayst