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只包含一个空格字符，因此很难找到空格字符并单击它。如果添加文本并单击该文本，您将看到正在执行句柄功能：

工作小提琴：http://jsfiddle.net/an8wvLqh/

为什么这个onClick不起作用？

1 个答案: