Почему функция в стороне функции не вызвана?

Question

У меня есть следующий код реакции для создания двух выпадающих списков, где ddlproducts загружается выбором ddlCategories. но когда я вызвал функцию getDataById() и попытался напечатать данные, заполненные массивом ajax2, до alert(), не было alert(), было два предупреждения, ни одно из предупреждений не было предложено. это показано сообщение об ошибке на консоли IE,

исполнение не достиг функции getDataById() «CuS чеку() в этой функции даже не казнил

SCRIPT438: Object Безразлично» т свойство поддержки или метод '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')); 

Answer 1

Попробуйте обновить ddlProdCatsChanegeEvent к ddlPropCatsChangeEvent.