javascript - 为什么这个 onClick 不起作用？

Question

我有以下 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)} >&nbsp;</div>
                            { likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null}
                        </div>
            );
    }
});

问题是即使我点击likeB div 也永远不会触发handleClick？为什么？

编辑:

这是使用 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 并不真正存在。有解决此问题的简单方法吗？

Answer 1

您应该像这样传递处理点击事件:

<div className="likeB" onClick={this.handleClick.bind(this,!like)} >&nbsp;</div>

在当前版本中，您将执行 this.handleClick(!like) 的结果传递给 undefined 的 onClick 处理程序。

在上述版本中，您将传递一个函数，它在执行时将!like 作为其第一个参数。

更新:

此外，由于您的 div 仅包含一个空格字符，因此很难找到空格字符并单击它。如果添加文本并单击该文本，您将看到正在执行句柄函数:

工作 fiddle :http://jsfiddle.net/an8wvLqh/