【React】组件间传递函数的问题

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

譬如：上面的这一段代码

如果没有留意绑定 this.handleClick 的话, 直接传给 onClick，就会招 Bug 的了。

因为当 handleClick 被调用的时候，里面的 this 会是 undefined

那么怎么才能保证 this 不会指代别的，而是我们想要的呢？有以下推荐方案

方案

使用 .bind(this) 使这个函数不论怎么调用都有同样的 this 值。将上面的例子代码改一改为：

<button onClick={this.handleClick.bind(this)}>

参考：bind()

其它的两种解决方案参考：文档