React事件绑定

事件绑定各种写法分析

一、

class Son extends React.Component{
  addN(){
    this.setState({n: this.state.n + 1})
 } 
  render(){
  return <button onClick={()=>this.addN()}>n+1</button>
         // 或
         // <button onClick={this.addN.bind(this)}>n+1</button>
  }
}

以上写法要绑定this (箭头函数this本身就不可变)，否则会导致函数里面的this变成window
原因：

<button onClick={this.addN}>n+1</button>

使用以上写法React会调用button.onClick.call(null,event)，此时传的this是null，相当于this是window

---

二、

class Son extends React.Component{
 constructor(){
    super()
    this.addN= () => this.setState({n: this.state.n + 1});   
  }
  render(){
    return <button onClick={this.addN}>n+1</button>
  }
}

这上下两种写法等价，这两种写法不用绑定this，原因如下图

class Son extends React.Component{
    addN= () => this.setState({n: this.state.n + 1});   
    render(){
    return <button onClick={this.addN}>n+1</button>
  }
}

类的this指向 类的this.png