react中解決this指向問題的四種方法

一.行間定義事件后面使用bind綁定this

run(){
            alert("第一種方法！")
    }

      <button onClick={this.run.bind(this)}>第一種</button>

 

這一種方法使用bind來修改this的指向，需要注意的是bind括號內第一個參數是修改this的，后面可以設置其他參數進行傳值。

二.在構造函數內部聲明this指向

    constructor(props) {
        super(props);
        this.state={
            //定義數據
        }
        this.run = this.run.bind(this);
    }
    
     run(){
            alert("第二種方法！")
      }
      
     <button onClick={this.run}>第二種</button>

 

第二種方法和第一種方法原理一樣，只是寫的位置不同。

 

三.聲明事件時將事件等於一個箭頭函數

run=()=> {
        alert("第三種方法！")
      }

    <button onClick={this.run}>第三種</button>

 

第三種方法是將定義的run方法再等於一個箭頭函數，利用箭頭函數沒有自己的this指針會繼承外層的作用域這個特性，來解決this指向問題

四.行間定義事件使用箭頭函數

     run(){
        alert("第四種方法！")
      }

    <button onClick={()=>this.run()>第四種</button>

 

第四種方法和第三種方法的原理是一樣的，只是寫法不同。

 

 

 

 

————————————————

轉載：

版權聲明：本文為CSDN博主「塵生杜若丶」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43851769/article/details/88096457