2016-09-16 139 views
1

我有以下reactjs代码来生成ddlCategories被ddlCategories选择加载的ddl产品的两个下拉列表。但是当我调用函数getDataById()并试图将ajax填充数组data2打印到alert()时,没有alert()有两个警报没有提示警报。它所示的IE控制台上此错误消息,为什么函数的函数不会被调用?

执行没有达到功能getDataById()“CUS警报()该函数即使没有执行

SCRIPT438:对象没有按”吨支持属性或方法 'getDataById'

校正:一旦this.props.getDataById的呼叫()改为this.getDataById(),它的工作

但是如何填充ddlProducts下拉菜单。我如何访问ddlProducts的标签,然后将选项添加到它?

这里是代码:

var gdata=[]; 

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

var HCOMP = 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(){ 

      this.getDataById(this.state.selectedValue); 
      alert(this.state.data2); 
     }); 
    } 
}, 
render: function() { 
    var prodCats = this.state.data1.map(function(ele, index){// <PRODCATSOPTION optValue={ele.ProductCategoryID} optText={ele.Name} /> 
     return <option value={ele.ProductCategoryID} data-key={index}>{ele.Name}</option> 
    }); 

    prodCats.unshift(<option value={''}>{'---- select category ------'}</option>) 

    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:53721//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:53721//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(<HCOMP/>, document.getElementById('d1')); 

回答

0

尝试更新ddlProdCatsChanegeEvent到ddlPropCatsChangeEvent。

+0

我已经更新了代码,而不是从道具中调用'getDataById',我称它为this.getDataById(this.state.selectedValue)。好消息是现在所有的警报显示数据,但与我目前的代码如何填充下拉ddlPorducts。我已经包括了裁判,但我如何将收藏添加到ddlPorducts? –

相关问题