bind()：您正在将组件方法绑定到组件。 React 会自动为你做这些吗？

Question

我从 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

组件看起来像这样

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

删除 "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>

您的 return HTML 中需要一个根元素。

Answer 2

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

请参阅 this Google Groups thread 了解说明。

Answer 3

自 v0.4 起 React autoBind 为您服务。见https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html所以你不需要绑定你自己

Answer 4

react 在方法调用时自动将方法绑定到 this。这很有用，因为它允许您直接传递函数。所以要避免此消息，只需传递 null 而不是 this。参考：AutoBind

Answer 5

你应该明白bind要达到什么目的，我会在这里解释一下。

首先，想想谁会调用 handleClick ？即应该有一些像 xxx.handleClick、xxx 这样的代码真的很重要，因为当你在 handleClick 中调用 this.setState 时，this 引用 xxx，并且setState只存在于React component，所以xxx应该指的是component实现什么你就什么，这就是为什么.bind(this)要handleClick，为了在 handleClick

中将 this 设置为 React Component

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

Answer 6

就我而言，以前我有这个，

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

bind()：您正在将组件方法绑定到组件。 React 会自动为你做这些吗？

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

javascript

reactjs

react-jsx

reactjs.net