react事件处理为什么推崇显式调用 bind

Question

react事件处理为什么推崇显式调用 bind

Answer 1

如果你的点击事件触发的方法里需要引用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 2

官方推荐的是在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 callbackthis.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>);}}