我正在尝试将方法传递给子组件以处理onclick事件。我在网上看到了很多示例,但无法正常运行。当我进入父级的渲染功能并尝试将“ this.handleClick”传递给子级时,handleClick是未定义的。
看一下ThumbList的渲染方法:
var Thumb = React.createClass({
handleClick: function() {
console.log(this)
console.log('handleClick of Thumb')
this.props.onClick()
},
render: function() {
return(
<div className="thumb" key={this.props.thumb.url}>
<a href='#' onClick={this.handleClick}>
<img src={'/img/rings/thumbs/'+this.props.thumb.url+'_thumb.jpg'} alt="Image">
</img>
</a>
</div>
);
}
});
var ThumbList = React.createClass({
handleClick: function (id) {
console.log('click of ThumbList');
},
loadFromServer: function() {
$.ajax({
url: 'rings/imgs/5',
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error('rings/imgs/5', status, err.toString());
}.bind(this)
});
},
getInitialState: function(){
return {data: [] };
},
componentDidMount: function(){
this.loadFromServer();
setInterval(this.loadFromServer, 2000);
},
render: function() {
var handlefunc=this.handleClick
var thumbsNodes = this.state.data.map(function(thumb) {
console.log(this.handleClick) // is Undefined!
console.log(handlefunc) // is working
return (
<Thumb thumb={thumb} key={thumb.url} onClick={handlefunc.bind(this,thumb.url)}/>
);
});
return(
<div className="col-md-1 col-md-offset-1" id='thumbs'>
{thumbsNodes}
</div>
);
}
});
知道我可能会缺少什么吗?
如果您在开发工作流程中使用Babel之类的编译器,则建议使用箭头函数:
var thumbsNodes = this.state.data.map((thumb) => {
console.log(this.handleClick);
return <Thumb thumb={thumb} key={thumb.url}
onClick={this.handlefunc.bind(this,thumb.url)}/>;
});
如您所见,这是一个很好的紧凑语法。箭头功能将为您保留this
上下文。Babel编译器生成使用闭包的JavaScript:
var thumbsNodes = this.state.data.map(function(thumb) {
var _this = this;
console.log(_this.handleClick);
return <Thumb thumb={thumb} key={thumb.url}
onClick={_this.handlefunc.bind(_this,thumb.url)}/>;
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句