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
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容