[英]React.js: onClick function from child to parent
我以这篇文章为例(React 方式),但它对我不起作用。 请指出我的错误,因为我不明白出了什么问题。
这是我看到的错误:
未捕获的类型错误:this.props.onClick 不是函数
这是我的代码:
// PARENT
var SendDocModal = React.createClass({
getInitialState: function() {
return {tagList: []};
},
render: function() {
return (
<div>
{
this.state.tagList.map(function(item) {
return (
<TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/>
)
})
}
</div>
)
},
HandleRemove: function(c) {
console.log('On REMOVE = ', c);
}
});
// CHILD
var TagItem = React.createClass({
render: function() {
return (
<span className="react-tagsinput-tag">
<span>{this.props.nameProp}</span>
<a className='react-tagsinput-remove' onClick={this.HandleRemove}></a>
</span>
)
},
HandleRemove: function() {
this.props.onClick(this);
}
});
提前致谢!
问题是map
回调中的this
不引用 React 组件,因此this.HandleRemove
是undefined
。
您可以通过将第二个参数传递给map
来显式设置this
值:
this.state.tagList.map(function() {...}, this);
现在回调内部的this
引用与回调外部的this
相同的值,即SendDocModal
实例。
这与 React 无关,它只是 JavaScript 的工作方式。 请参阅如何在回调中访问正确的“this”上下文? 了解更多信息和其他解决方案。
请尝试以下操作:
var SendDocModal = React.createClass({
getInitialState: function() {
var item = {};
item.Name = 'First';
item.Id = 123;
var item2 = {};
item2.Name = 'Second';
item2.Id = 123456;
return {tagList: [item,item2]};
},
HandleRemove: function(c){
console.log('On REMOVE = ', c);
},
render: function() {
return (<div>
{this.state.tagList.map(function(item){
return(
<TagItem nameProp={item.Name} idProp={item.Id} key={item.Id} click={this.HandleRemove}/>
)}, this)}
</div>
)
}
});
// CHILD
var TagItem = React.createClass({
handleClick: function(nameProp)
{
this.props.click(nameProp);
},
render: function(){
return(
<span className="react-tagsinput-tag" ><span onClick={this.handleClick.bind(this, this.props.nameProp)}>{this.props.nameProp}</span><a className='react-tagsinput-remove' ></a></span>
)
}
});
一些变化:
在 tagList 映射之后添加了“this”。 老实说,我不完全确定为什么 - 也许更有经验的程序员可以告诉我们。
为每个 TagItem 添加了一个键。 这是推荐的,控制台会通知你应该这样做,这样如果状态发生变化,React 可以相应地跟踪每个项目。
点击通过道具传递。 请参阅React js - 创建待办事项列表时遇到问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.