为什么这个 onClick 不起作用?
Why is not this onClick work?
我有以下 reactJS/JSX 代码:
var LikeCon = React.createClass({
handleClick: function(like) {
return;
},
render(){
return this.renderLikeButton(this.props.like, this.props.likeCount)
},
renderLikeButton(like, likeCount){
return (
content = <div className={like==true ? "likeButConAct" : "likeButCon"}>
<div className="likeB" onClick={this.handleClick(!like)} > </div>
{ likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null}
</div>
);
}
});
问题是handleClick即使点击likeB也不会触发div?为什么?
编辑:
这是使用 LikeCon 组件的代码:
var TopicComments = React.createClass({
render: function() {
var comment = this.props.data.map(function(com, i) {
return (
<article>
<div className="comment">
<div className="tUImgLnk">
<a title={com.UserName} target="_blank" href={com.UserInfoUrl}>
<img className="tUImg" src={com.UserPicSrc} />
</a>
</div>
<a href="#" target="_blank">{com.UserName}</a>
<div className="content">
{com.Message}
</div>
<div className="status">
<div className="dateCreated dimText">
{com.DateCreated}
</div>
<LikeCon like={com.Like} likeCount={com.LikeCount} />
<article></article>
</div>
</div>
</article>);
}.bind(this));
return(
<div className="comments">
{comment}
</div>
);
}
});
我怀疑问题在于 LikeCon 正在为 TopicComment 生成标记,因此当从 TopicComment 触发时 handleClick 并不真正存在。有解决此问题的简单方法吗?
您应该像这样传递句柄点击事件:
<div className="likeB" onClick={this.handleClick.bind(this,!like)} > </div>
在您当前的版本中,您将执行 this.handleClick(!like)
的结果传递给 undefined
的 onClick 处理程序。
对于以上版本,您传递的是 函数,它在执行时将 !like
作为第一个参数。
更新:
此外,由于您的 div
仅包含一个 space 字符,因此很难找到 space 字符并单击它。如果您添加文本并单击该文本,您将看到正在执行句柄函数:
工作 fiddle : http://jsfiddle.net/an8wvLqh/
我有以下 reactJS/JSX 代码:
var LikeCon = React.createClass({
handleClick: function(like) {
return;
},
render(){
return this.renderLikeButton(this.props.like, this.props.likeCount)
},
renderLikeButton(like, likeCount){
return (
content = <div className={like==true ? "likeButConAct" : "likeButCon"}>
<div className="likeB" onClick={this.handleClick(!like)} > </div>
{ likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null}
</div>
);
}
});
问题是handleClick即使点击likeB也不会触发div?为什么?
编辑:
这是使用 LikeCon 组件的代码:
var TopicComments = React.createClass({
render: function() {
var comment = this.props.data.map(function(com, i) {
return (
<article>
<div className="comment">
<div className="tUImgLnk">
<a title={com.UserName} target="_blank" href={com.UserInfoUrl}>
<img className="tUImg" src={com.UserPicSrc} />
</a>
</div>
<a href="#" target="_blank">{com.UserName}</a>
<div className="content">
{com.Message}
</div>
<div className="status">
<div className="dateCreated dimText">
{com.DateCreated}
</div>
<LikeCon like={com.Like} likeCount={com.LikeCount} />
<article></article>
</div>
</div>
</article>);
}.bind(this));
return(
<div className="comments">
{comment}
</div>
);
}
});
我怀疑问题在于 LikeCon 正在为 TopicComment 生成标记,因此当从 TopicComment 触发时 handleClick 并不真正存在。有解决此问题的简单方法吗?
您应该像这样传递句柄点击事件:
<div className="likeB" onClick={this.handleClick.bind(this,!like)} > </div>
在您当前的版本中,您将执行 this.handleClick(!like)
的结果传递给 undefined
的 onClick 处理程序。
对于以上版本,您传递的是 函数,它在执行时将 !like
作为第一个参数。
更新:
此外,由于您的 div
仅包含一个 space 字符,因此很难找到 space 字符并单击它。如果您添加文本并单击该文本,您将看到正在执行句柄函数:
工作 fiddle : http://jsfiddle.net/an8wvLqh/