您好,登錄后才能下訂單哦!
這篇文章主要講解了“react點(diǎn)擊事件的寫(xiě)法有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“react點(diǎn)擊事件的寫(xiě)法有哪些”吧!
寫(xiě)法:1、用“onClick={this.handleClick}”;2、用“onClick={this.handleClick.bind(this)}”;3、用“{(params)=>this.handleClick(params)}”。
本教程操作環(huán)境:Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。
開(kāi)門(mén)見(jiàn)山,先直接給出為一個(gè)button添加一個(gè)事件的正確寫(xiě)法:
為一個(gè)button添加一個(gè)onclick事件的正確寫(xiě)法
不傳參數(shù)
// handleClick用 <箭頭函數(shù)> 定義
onClick = { this.handleClick }
// handleClick用箭頭函數(shù)定義時(shí),為onClick添加事件應(yīng)該這么寫(xiě):<Button onClick = { this.handleClick }></Button>
handleClick這么定義:
handleClick = () => { // do something here};
或
// handleClick用 (普通函數(shù)) 定義
onClick = { this.handleClick.bind(this) }
// handleClick用普通函數(shù)定義時(shí),為onClick添加事件應(yīng)該這么寫(xiě):<Button onClick = { this.handleClick.bind(this) }></Button>
handleClick這么定義:
handleClick () { // do something here }
傳參數(shù)
// handleClick用 <箭頭函數(shù)>/(普通函數(shù)) 定義都可以
onClick = { (params) => this.handleClick(params) }
// handleClick可以是箭頭函數(shù),也可以是普通函數(shù)<Button onClick = { (params) => this.handleClick(params) }></Button>
接下來(lái)分析一下為什么這樣寫(xiě)是正確的:
理解這個(gè)問(wèn)題,帶著下面這幾句話去理解:
箭頭函數(shù),沒(méi)有自己的this,所以它的this是 : 定義時(shí)上下文 的this
普通函數(shù),有自己的this,所以它的this是:執(zhí)行時(shí)上下文的this
先來(lái)看第一種寫(xiě)法:
下面給出的代碼為:為一個(gè)按鈕添加onclick事件(一個(gè)完整的jsx)
// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component { // 2. 定義handleClick事件 handleClick = () => { console.log(this); //3. this指向examplePage } render() { return ( <p> // 1. 為onClick綁定 handleClick事件處理函數(shù) <Button onClick = { this.handleClick }>click me</Button> </p> ) }}export default examplePage;
點(diǎn)擊按鈕,打印出指向examplePage的this:
this: examplePage {props: Object, context: {}, refs: {}, updater: Object, state: {}, …}
分析:
當(dāng)點(diǎn)擊Button,調(diào)用handleClick事件處理函數(shù),
因?yàn)閔andleClick是一個(gè)箭頭函數(shù),因此 this是 定義時(shí)上下文的this ,
handleClick在class examplePage 中定義的 ,
所以this指向examplePage
再看如果把箭頭函數(shù)改為普通函數(shù)的情況:
先來(lái)看,如果不用bind(this),console.log(this)會(huì)輸出什么:
// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component { // 2. !將箭頭函數(shù)改為普通函數(shù) handleClick () { console.log(this); // 3. this 為 undefined } render() { return ( <p> // 1. 為onClick綁定 handleClick事件處理函數(shù) <Button onClick = { this.handleClick }>click me</Button> </p> ) }}export default examplePage;
點(diǎn)擊按鈕,打印出this:
this: undefined
分析:
當(dāng)點(diǎn)擊Button,調(diào)用handleClick事件處理函數(shù),
因?yàn)閔andleClick是一個(gè)普通函數(shù),因此 this是 執(zhí)行時(shí)上下文的this ,
handleClick在頁(yè)面中點(diǎn)擊Button時(shí)執(zhí)行的 ,上下文環(huán)境是html的那個(gè)頁(yè)面
所以this是undefined,并不指向examplePage
注:在嚴(yán)格版中,默認(rèn)的this不再是window,而是undefined
Module code is always strict mode code.
All parts of a ClassDeclaration or ClassExpression are strict mode code.
因此需要用bind來(lái)改變this指向,即:
render() { return ( <p> // 用bind改變this指向 <Button onClick = { this.handleClick.bind(this) }>click me</Button> </p> )}
分析:
當(dāng)點(diǎn)擊Button,調(diào)用handleClick事件處理函數(shù),
通過(guò)bind()函數(shù),將render函數(shù)的this(指向class examplePage),當(dāng)作一個(gè)變量傳入handleClick
本來(lái)handleClick是一個(gè)普通函數(shù), this是 執(zhí)行時(shí)上下文的this(即 undefined),但因?yàn)閎ind(this)傳入- - 了指向examplePage的this
所以此時(shí),this是指向examplePage,解決了this為undefined的問(wèn)題
理解了上面兩個(gè),最后一個(gè)就很好理解了:
render() { return ( <p> // 通過(guò)箭頭函數(shù)傳參 <Button onClick = { (params) => this.handleClick(params) }></Button> </p> )}
分析:
通過(guò)箭頭函數(shù)傳參數(shù),相當(dāng)于onClick綁定了一個(gè)箭頭函數(shù)
點(diǎn)擊Button時(shí),調(diào)用(params) => this.handleClick(params)這個(gè)箭頭函數(shù),因此 this是 定義時(shí)上下文的this ,
handleClick在class examplePage 中定義的 ,
所以this指向examplePage
按這種思路,只要把onClick的響應(yīng)事件用箭頭函數(shù)來(lái)寫(xiě),調(diào)用的時(shí)候,this指向的都是該組件class,就不會(huì)有問(wèn)題
那么,不傳參的時(shí)候,就這么寫(xiě):
<Button onClick = { () => this.handleClick() }></Button>
但這是不可行的,因?yàn)閞eact會(huì)直接解析()=> this.handleClick(), handleClick會(huì)被調(diào)用,相當(dāng)于onClick = “調(diào)用handleClick的結(jié)果”
所以,不傳參數(shù)的時(shí)候只能這么寫(xiě):
<Button onClick = { this.handleClick }></Button>
總結(jié)
開(kāi)頭的三個(gè)問(wèn)題可以得到回答
什么情況下需要bind(this)?
答: onClick傳入的事件處理函數(shù)是普通函數(shù)的時(shí)候,需要bind(this)來(lái)改變指向
為什么要用bind(this)?
答:如果不用bind(this), this會(huì)指向undefined
可以不用bind(this)嗎?
答:用箭頭函數(shù) (用箭頭函數(shù)定義事件處理函數(shù))
//定義handleClick事件 handleClick = () => { // do something here }; //為onClick綁定handleClick事件處理函數(shù) <Button onClick = {this.handleClick}></Button> // 不傳參 <Button onClick = {(param) => this.handleClick(param) }></Button> // 傳參
感謝各位的閱讀,以上就是“react點(diǎn)擊事件的寫(xiě)法有哪些”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)react點(diǎn)擊事件的寫(xiě)法有哪些這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。