React中事件綁定this指向三種方法的實(shí)現(xiàn)
更新時間：2021年05月12日 09:21:40 作者：沐浴 前端
這篇文章主要介紹了React中事件綁定this指向三種方法的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.箭頭函數(shù)
1.利用箭頭函數(shù)自身不綁定this的特點(diǎn);
2.render()方法中的this為組件實(shí)例,可以獲取到setState();
class App extends React.Component{
state ={
count: 0
}
// 事件處理程序
onIncrement() {
console.log('事件處理函數(shù)中的this:',this)
this.setState({
count:this.state.count+1
})
}
// 渲染
render() {
return (
<div>
<h1> {this.state.count}</h1>
// 箭頭函數(shù)中的this指向外部環(huán)境，此處為：render()方法
<button onClick={()=>this.onIncrement()}>+1</button>
{/* <button onClick={this.onIncrement()}>+1</button> */}
</div>
)
}
}
2.Function.proptype.bind()
1.利用ES5中的bind方法,將事件處理程序中的this與組件實(shí)例綁定到一起
class App extends React.Component{
constructor() {
super()
// 數(shù)據(jù)
this.state ={
count: 0
}
// 第一中方法.bind 改變this指向,返回一個函數(shù),不執(zhí)行該函數(shù)
this.onIncrement = this.onIncrement.bind(this)
}
// 事件處理程序
onIncrement() {
console.log('事件處理函數(shù)中的this:',this)
this.setState({
count:this.state.count+1
})
}
// 渲染
render() {
return (
<div>
<h1> {this.state.count}</h1>
<button onClick={this.onIncrement}>+1</button>
{/* <button onClick={this.onIncrement()}>+1</button> */}
</div>
)
}
}
3.class的實(shí)例方法
1.利用箭頭函數(shù)形式的class實(shí)例方法
2.該語法是實(shí)驗(yàn)性語法,但是由于babel的存在就可以直接使用
class App extends React.Component{
constructor() {
super()
// 數(shù)據(jù)
this.state ={
count: 0
}
}
// 事件處理程序
onIncrement=()=> {
console.log('事件處理函數(shù)中的this:',this)
this.setState({
count:this.state.count+1
})
}
// 渲染
render() {
return (
<div>
<h1> {this.state.count}</h1>
<button onClick={this.onIncrement}>+1</button>
{/* <button onClick={this.onIncrement()}>+1</button> */}
</div>
)
}
}
到此這篇關(guān)于React中事件綁定this指向三種方法的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React 事件綁定this指向內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React實(shí)現(xiàn)文件分片上傳和下載的方法詳解
在當(dāng)今的前端開發(fā)中,處理文件流操作已經(jīng)成為一個常見的需求,無論是上傳、下載、讀取、展示還是其他的文件處理操作,都需要高效且可靠地處理二進(jìn)制數(shù)據(jù),本文將深入探討如何使用 React 實(shí)現(xiàn)文件分片上傳和下載,并介紹相關(guān)的基本概念和技術(shù),需要的朋友可以參考下2023-08-08
React中使用Workbox進(jìn)行預(yù)緩存的實(shí)現(xiàn)代碼
Workbox是Google Chrome團(tuán)隊(duì)推出的一套 PWA 的解決方案,這套解決方案當(dāng)中包含了核心庫和構(gòu)建工具,因此我們可以利用Workbox實(shí)現(xiàn)Service Worker的快速開發(fā),本文小編給大家介紹了React中使用Workbox進(jìn)行預(yù)緩存的實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了在 React 中使用 substring() 方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
關(guān)于antd tree和父子組件之間的傳值問題(react 總結(jié))
這篇文章主要介紹了關(guān)于antd tree 和父子組件之間的傳值問題，是小編給大家總結(jié)的一些react知識點(diǎn)，本文通過一個項(xiàng)目需求實(shí)例代碼詳解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-06-06
這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
react如何實(shí)現(xiàn)一個密碼強(qiáng)度檢測器詳解
這篇文章主要給大家介紹了關(guān)于react如何實(shí)現(xiàn)一個密碼強(qiáng)度檢測器的相關(guān)資料,使用這個密碼強(qiáng)度器后可以幫助大家提高在線帳號、個人信息的安全性,需要的朋友可以參考下2021-06-06
通過示例講解Remix?設(shè)計(jì)哲學(xué)理念
這篇文章主要為大家通過示例講解了Remix?設(shè)計(jì)哲學(xué)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React視頻播放控制組件Video Controls的實(shí)現(xiàn)
本文主要介紹了React視頻播放控制組件Video Controls的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
react-native消息推送實(shí)現(xiàn)方式
這篇文章主要介紹了react-native消息推送實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
在現(xiàn)代單頁應(yīng)用（SPA）中,路由管理是至關(guān)重要的一部分,它不僅決定了用戶如何在頁面間切換,還直接影響到整個應(yīng)用的性能和用戶體驗(yàn),這些看似不起眼的問題,往往會導(dǎo)致功能錯亂和性能下降,本篇文章將深入探討在 React 中如何高效監(jiān)聽路由變化,需要的朋友可以參考下2025-01-01