bind(): You are binding a component method to the component. React does this for you automatically?

Question

I get this warning from reactJS.NET

bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See LikeCon

Component looks like this

var LikeCon = React.createClass({
    handleClick: function() {
            var data = new FormData();
            var like = !this.state.like;
            var likeCounter = this.state.likeCount;

            data.append("catgoryType", this.state.categoryKey);
            data.append("objectId", this.state.objectId);
            data.append("like", like);

            if(like)
                likeCounter++;
            else
                likeCounter--;

            this.setState({ like: like, likeCount: likeCounter, userId: this.state.userId, categoryKey: this.state.categoryKey, objectId: this.state.objectId});

            var xhr = new XMLHttpRequest();
            xhr.open("post", "http://localhost:2215/Home/SetLike", true);
            xhr.onload = function() {
        };
        xhr.send(data);
    },
    getInitialState: function() {
        return { like: this.props.initialLike, likeCount: this.props.initialLikeCount, userId: this.props.userId, categoryKey: this.props.categoryKey, objectId: this.props.objectId  };
    },
    render(){
        return this.renderLikeButton()
    },
    renderLikeButton(){
        return (
                content =  
                <div className="likeCon">
                    <div className={this.state.like==true ? "likeButConAct" : "likeButCon"}>
                        <div className="likeB" title={this.state.like==true ? "Unlike" : "Like"} onClick={this.handleClick.bind(this)} >
                            &nbsp;
                        </div>
                        { this.state.likeCount > 0 ? <div className="likeCount">{this.state.likeCount}</div>: null}

                    </div>
                </div>
            );
    }
})

I uses a bind when calling the method handleClick, If I remove this I will get another exception? So what am I supose to do?

Answer 1

Pass *.bind(null,this) instead;

See this Google Groups thread for explanation.

Answer 2

react automatically binds methods to this on method call. This is helpful because it allows you to directly pass functions. so to avoid this message just pass null instead of this. refer:AutoBind

Answer 3

In my case, previously I have this,

<input placeholder="URL" id="txt_url" className="form-control"
        value={this.state.url} onChange={this.handleChange.bind(this)}/>

Removing that .bind call solved it

<input placeholder="URL" id="txt_url" className="form-control"
        value={this.state.url} onChange={this.handleChange}/>