React中事件綁定this指向三種方法的實(shí)現(xiàn)
更新時(shí)間：2021年05月12日 09:21:40 作者：沐浴 前端
這篇文章主要介紹了React中事件綁定this指向三種方法的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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指向,返回一個(gè)函數(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.該語(yǔ)法是實(shí)驗(yàn)性語(yǔ)法,但是由于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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
我們知道，在React中沒(méi)有像Vue那種數(shù)據(jù)雙向綁定的效果。而this.setState方法就是用來(lái)對(duì)數(shù)據(jù)進(jìn)行更改的。而通過(guò)this.setState方法更改的數(shù)據(jù)，會(huì)讓組件的render重新渲染，并且刷新數(shù)據(jù)2022-09-09
使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過(guò)程詳解
這篇文章主要介紹了使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過(guò)程詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
reactjs學(xué)習(xí)解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
React報(bào)錯(cuò)之Object?is?possibly?null的問(wèn)題及解決方法
這篇文章主要介紹了React報(bào)錯(cuò)之Object?is?possibly?null的問(wèn)題,造成 "Object is possibly null"的錯(cuò)誤是因?yàn)閡seRef()鉤子可以傳遞一個(gè)初始值作為參數(shù)，而我們傳遞null作為初始值，本文給大家分享詳細(xì)解決方法，需要的朋友可以參考下2022-07-07
使用Webpack打包React項(xiàng)目的流程步驟
隨著React應(yīng)用日益復(fù)雜,開(kāi)發(fā)者需要借助模塊打包工具來(lái)管理項(xiàng)目依賴、轉(zhuǎn)換代碼和優(yōu)化性能,Webpack是一款功能強(qiáng)大的模塊打包器,它可以將React項(xiàng)目中的JavaScript、CSS、圖片等資源打包成瀏覽器友好的文件,本文將全面介紹如何使用Webpack打包React項(xiàng)目2025-03-03
這篇文章主要介紹了一文詳解React?Redux使用方法，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了利用ES6語(yǔ)法重構(gòu)React組件的相關(guān)資料，文中通過(guò)示例代碼介紹的很詳細(xì)，對(duì)大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
使用store來(lái)優(yōu)化React組件的方法
這篇文章主要介紹了使用store來(lái)優(yōu)化React組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
React中定義一個(gè)組件,可以通過(guò)ES6版本以前的React.createClass或者ES6的class xxx extends React.Component,綁定this是react中非常重要的一部分,React中,綁定this的方式有多種,下面一一看看怎么進(jìn)行this綁定并給函數(shù)傳參,需要的朋友可以參考下2025-07-07
React Native之ListView實(shí)現(xiàn)九宮格效果的示例
本篇文章主要介紹了React Native之ListView實(shí)現(xiàn)九宮格效果的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08