React 事件处理为什么推荐调用 bind

Question

React 事件处理为什么推荐调用 bind

Answer 1

官方推荐的是在constructor中bind，或者箭头函数class属性初始化语法。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}

 

Answer 2

如果你的点击事件触发的方法里需要引用this。就需要绑定啊。不然你的this是null（记得如果没绑定this应该是全局window。但这里this 就是null，撸完手上的需求去看一下react源码 ）
所以 你要么在创建的时候绑定：
<div className="save" onClick={this.handleClick.bind(this)}>Save</div>
要么在一开始构造器里声明绑定
constructor(props){
super(props);
this.handleClick=this.handleClick.bind(this)
还有一种是利用闭包把作用域包起来
<div className="save" onClick={()=>this.handleClick}>Save</div>
如果用第一种 会在每次点击时通过bind创建一个新的方法，所以一般用2 3 两种情况，显示调用bind()只是为了保证this值。

Answer 3

body事件是要到componentDidMount绑定没错，我是没看到问题中的代码，大概有用了jQuery的bind与unbind，事件的顺序会不正确。 在组件的onClick事件里取消事件委托