I get this warning from reactJS.NET

bind(): You are binding a ponent method to the ponent. 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?

I get this warning from reactJS.NET

bind(): You are binding a ponent method to the ponent. 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?

• javascript
• reactjs
• reactjs

• What is the other exception? – Mark Commented Feb 24, 2015 at 20:10
• If I remove .bind then I get Error while rendering "FeedBox" to "react1": ReferenceError: FormData is not defined – Banshee Commented Feb 24, 2015 at 20:24
• 3 Where is FormData defined? – Brandon Pugh Commented Feb 24, 2015 at 20:32
• 3 You shouldn't need to use this.handleClick.bind(this). React automatically binds to the ponent instance, so just this.handleClick is needed. The actual error seems more like you've forgotten to include the class FormData. – WiredPrairie Commented Feb 24, 2015 at 21:40
• FormData is used in handleClick but its not a defined class, I thought that it would be created on the fly? Im using reactjs/getting-started/tutorial.html as source where the FormData also is used the same way? And when using Bind it works just fine? – Banshee Commented Feb 25, 2015 at 7:35

6 Answers 6

Pass *.bind(null,this) instead;

See this Google Groups thread for explanation.

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

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

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.

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

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 ponent, so xxx should refer to the ponent 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