react-事件处理中的this

当你使用 ES6 class 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。例如，下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮：

当浏览器执行上述脚本代码时会发生如下错误：

错误产生的原因是因为onClick={this.handleClick}仅仅传入了函数的引用，并没有绑定执行函数this指向，所以this值是undefined，this.setState就找不到setState。

既然没有绑定函数的this指向，我们有以下两种方式指定this：

• 1、使用bind绑定this

constructor(props) {
    super(props)
    this.state = { isToggleOn: false }
    this.handleClick = this.handleClick.bind(this)
}

或者

render() {
    return (
      
        {this.state.isToggleOn ? 'on' : 'off'}
      
    )
}

• 2、回调函数采用调用式

render() {
    return (
       this.handleClick()}>
        {this.state.isToggleOn ? 'on' : 'off'}
      
    )
}

handleClick函数调用者是this（Toggle对象），所以函数内部this也指向Toggle对象