CODEWITHSUNDEEP
javascriptreactjs
Banshee
Banshee

Reputation: 15847

Why is not this onClick work?

I have the following reactJS/JSX code :

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>
            );
    }
});

The problem is that handleClick will never be triggered even when I click the likeB div? Why?

Edit :

This is the code that uses the LikeCon component : 

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>
            );
    }
});

I suspect the problem is that the LikeCon is generating a markup for the TopicComment so the handleClick is not really there when triggered from the TopicComment. Is there a simple way to fix this?

Upvotes: 1

Views: 1333

Answers (1)

nilgun
nilgun

Reputation: 10629

You should be passing handle click event like so:

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

With your current version you are passing result of executing this.handleClick(!like) to onClick handler which is undefined.

With above version you are passing a function which takes !like as its first parameter when executed.

Update:

Also since your div only contains a single space character, it is difficult to find the space character and click on it. If you add a text and click on that text, you will see the handle function is being executed:

working fiddle : http://jsfiddle.net/an8wvLqh/

Upvotes: 2

Related Questions