8

我从 reactJS.NET 收到这个警告

bind()：您正在将组件方法绑定到组件。React 以高性能的方式自动为您完成此操作，因此您可以安全地删除此调用。见 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 时使用了绑定，如果我删除它，我会得到另一个异常吗？那我该怎么办？

4

6 回答 6

5

*.bind(null,this)改为通过；

有关说明，请参阅此 Google Groups 线程。

于 2015-03-20T21:39:12.100 回答
2

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

于 2017-03-23T04:14:58.923 回答
1

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

<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}/>
于 2017-12-17T23:03:24.583 回答
0

删除“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 中需要一个根元素。

于 2015-02-25T23:08:57.400 回答
0

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

于 2015-09-26T09:25:09.783 回答
0

您应该了解bind要达到的目标，我将在此处进行说明。

首先，试着想想谁会调用 handleClick ？ie应该有一些类似的代码xxx.handleClick，xxx真的很重要，因为当你调用this.setStateinside时handleClick，this引用xxx，并且setState只存在于React component，所以xxx应该引用来component实现你什么，这就是为什么.bind(this)要handleClick设置this到React ComponentinsidehandleClick

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

于 2017-03-23T06:06:09.777 回答