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?

Longhand

What is the other exception? – Event

If I remove .bind then I get Error while rendering "FeedBox" to "react1": ReferenceError: FormData is not defined – Longhand

Where is FormData defined? – Gunar

You shouldn't need to use this.handleClick.bind(this). React automatically binds to the component instance, so just this.handleClick is needed. The actual error seems more like you've forgotten to include the class FormData. – Meninges

FormData is used in handleClick but its not a defined class, I thought that it would be created on the fly? Im using reactjs.net/getting-started/tutorial.html as source where the FormData also is used the same way? And when using Bind it works just fine? – Longhand

FormData should be in IE10 and higher ... assuming that the web page is being displayed in IE10 or higher mode (or Chrome or Firefox). There also should be no difference between the bind(this) and without. They should be functionally identical. Have you tried to debug the flow with a breakpoint? – Meninges

Answer 1

Pass *.bind(null,this) instead;

See this Google Groups thread for explanation.

Crumbly

This is mainly a link-only answer. Please include the relevant parts of the linked page so that the answer can still be understood when the link gets broken. – Insolvency

If binding null to handleClick, how can you expect this.setState() work in handleClick, this refer to null from my prespective – Pantoja

When trying to reach the link, I'm receiving following message: "This group either doesn't exist, or you don't have permission to access it. If you're sure this group exists, contact the Owner of the group and ask them to give you access." – Wawro

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

Cracking

Passing null will only generate the error bind(): React component methods may only be bound to the component instance. – Hebetate

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

Hebetate

Answer 4

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

Pantoja

Answer 5

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.

Duckweed

I tried both your suggestions but the problem are still there? – Longhand

a=b evaluate to a in javascript, try console.log(a=100) and you understand what I mean – Pantoja

Answer 6

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

Gath