bind():您正在将一个组件方法绑定到该组件.React会自动为您执行此操作

Question

我从reactJS.NET 收到此警告

bind（）：您正在将一个组件方法绑定到该组件。反应以高性能的方式自动为您执行此操作，因此您可以安全地删除此调用。参见LikeCon

组件看起来像这个

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

我在调用handleClick方法时使用了绑定，如果我删除它，我会得到另一个异常吗？那我该怎么办呢？

Answer 1

改为传递*.bind(null,this)；

有关解释，请参阅此Google群组线程。

Answer 2

react会在方法调用时自动将方法绑定到此。这很有帮助，因为它允许您直接传递函数。因此为了避免该消息只通过CCD_ 2而不是CCD_。参考：自动绑定

Answer 3

在我的情况下，以前我有

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

删除.bind调用解决了

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

Answer 4

删除"content="或创建包装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>

在返回的HTML中需要一个根元素。

Answer 5

由于v0.4 React autoBind为您提供。看见https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html所以你不需要绑定你自己的

Answer 6

您应该了解bind的目标，我将在这里进行解释。

首先，试着想想谁会调用handleClick？也就是说，应该有一些像xxx.handleClick、xxx这样的代码真的很重要，因为当你在handleClick中调用this.setState时，this指的是xxx，而setState只存在于React component中，所以xxx应该指component来实现你想要的，这就是为什么.bind(this)到handleClick，以便在null0 中设置this到React Component

现在，回到我的第一个问题，如果你没有明确地设置this，什么是xxx，在简单的javascript中，onClick回调是全局的，这意味着没有xxx，所以如果我是正确的，this应该引用全局对象，即window。然而，React以一种神奇的方式将xxx设置为React Component，这就是为什么您不需要显式地将其设置为