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

相信大家在學習和使用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>

 

第四種方法和第三種方法的原理是一樣的，只是寫法不同，全憑個人喜好吧。

總的來說，改變this的指向問題可以通過使用bind來修改this的指向，還有可以使用箭頭函數來解決。如果有更好更巧妙的方式，希望大家能評論告訴我，共勉！
————————————————
版權聲明：本文為CSDN博主「塵生杜若丶」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43851769/article/details/88096457