[英]React.js - Passed function “not a function” Error
我試圖將道具從子組件傳遞到父組件,但由於某種原因,我在點擊渲染的子組件后,在js控制台中收到錯誤“TypeError:this.props.onClick不是函數”。
基本上我要做的是管理一個類別列表,其中一個類別子組件將“selected”prop作為true,並且每次單擊類別li時都會正確更新。
這是一個代碼的jsfiddle: http : //jsfiddle.net/kb3gN/8023/
我真的不覺得我已經掌握了如何有效地使用React.js的概念,所以任何幫助都表示贊賞!
最誠摯的問候和提前謝謝,
bnunamak
碼:
var CategoryList = React.createClass({
getInitialState:function(){
return {
items:[
["cat1", false],
["cat2", true]
],
lastToggled:["cat2"]
}
},
//Function passed to child (changes items state)
handleClick:function(child){
var tempItems = this.state.items;
if(this.state.lastToggled[0] === child.props.name){
var index = this.getInd(this.state.tempItems, child.props.name);
tempItems[index][1] = !tempItems[index][1];
this.setState({items: tempItems});
}else{
var newIndex = this.getInd(this.state.tempItems, child.props.name);
tempItems[newIndex][1] = !tempItems[newIndex][1];
var oldIndex = this.getInd(this.state.tempItems, this.state.lastToggled[0]);
tempItems[oldIndex][1] = false;
this.setState({items: tempItems, lastToggled: tempItems[newIndex][0]});
}
},
//getInd not relevant to problem
getInd:function(arr, elname){
for (var i = arr.length - 1; i >= 0; i--) {
if(arr[i][0] === elname){
return i;
}
};
return -1;
},
render:function(){
return (<ul className="category-list">
{
this.state.items.map(function(item){
return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
})
}
</ul>)
}
});
var Category = React.createClass({
render:function(){
if(this.props.selected){
return (<li onClick={this.propogateClick} className="selected">{this.props.name}</li>);
}else{
return (<li onClick={this.propogateClick}>{this.props.name}</li>);
}
},
propogateClick: function(){
this.props.onClick(this);
}
});
React.renderComponent(<CategoryList/>, document.getElementById('example'));
您可以使用bind來解決此問題
this.state.items.map(function(item){
return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
}.bind(this))
顯然這是一個范圍問題:
this.state.items.map(function(item){
return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
})
如果我刪除外部地圖並添加一個通用類別它是有效的(好吧,還有其他問題,但點擊功能已成功通過)。
我將不得不以另一種方式傳遞函數(通過不使用this.handleClick)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.