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}/>

Answer 4

Remove "content = " or create a wrapping div:

<div>     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>
</div>

You need a root element in your return HTML.

Answer 5

Since v0.4 React autoBind for you. See https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html So you dont need to bind your self

Answer 6

You should understand what bind aim to achieve, and I will explain it here.

Firstly, try to think about who will call handleClick ? i.e. there should be some code like xxx.handleClick, xxx really matter because when you call this.setState inside handleClick, this refer to xxx, and setState only exist in React component, so xxx should refer to the component to achieve what you what, that is why .bind(this) to handleClick, in order to set this to React Component inside handleClick

So now, go back to my first question, if you do not set this explicitly, what is xxx, In plain javascript the onClick callback is global which means there is no xxx, so this should refer to the global object, i.e. window if I am correct. However React set the xxx to React Component in a magic way, that is why you do not need to set it explicitly