React點(diǎn)擊事件的兩種寫(xiě)法小結(jié)
更新時(shí)間：2022年12月02日 08:38:45 作者：叉叉醬
這篇文章主要介紹了React點(diǎn)擊事件的兩種寫(xiě)法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
React點(diǎn)擊事件寫(xiě)法
1.bind綁定（推薦）
第一個(gè)參數(shù)指向this，第二個(gè)參數(shù)開(kāi)始才是事件函數(shù)接收到的參數(shù)，事件對(duì)象event默認(rèn)是最后一個(gè)參數(shù)。
...
clicked(param,event){
? ? console.log(param) //hello world
? ? console.log(event.target.value) //按鈕
}
render(){
? ? return (
? ? ? ? <React.Fragment>
? ? ? ? ? ? <button value="按鈕" onClick={this.clicked.bind(this,"hello world")}>點(diǎn)擊</button>
? ? ? ? </React.Fragment>
? ? )
}
...這里的話綁定this可以統(tǒng)一寫(xiě)，這樣代碼看起來(lái)整潔點(diǎn)。
...
constructor(props){
? ? super(props);
? ? this.state = {};
? ? this.checkMenu = this.checkMenu.bind(this);
}
clicked = (param)=>{
? ? return (event)=>{
? ? ? ? console.log(event.target.value); // 按鈕
? ? ? ? console.log(param); // hello
? ? }
}
render(){
? ? return (
? ? ? ? <React.Fragment>
? ? ? ? ? ? <button value="按鈕" onClick={this.clicked('hello')}>點(diǎn)擊</button>
? ? ? ? </React.Fragment>
? ? )
}
...2.箭頭函數(shù)
箭頭函數(shù)若要傳事件對(duì)象event的話，需要在箭頭函數(shù)中把event作為參數(shù)傳遞給觸發(fā)的事件。
...
clicked(param,event){
? ? console.log(param) //hello world
? ? console.log(event.target.value) //按鈕
}
render(){
? ? return (
? ? ? ? <React.Fragment>
? ? ? ? ? ? <button value="按鈕" onClick={(event)=>this.clicked("hello world",event)}>點(diǎn)擊</button>
? ? ? ? </React.Fragment>
? ? )
}
...React點(diǎn)擊事件不好用，可能是被其他組件遮擋
入門(mén)React不久，練習(xí)例子的時(shí)候發(fā)現(xiàn)點(diǎn)擊退出事件不好用。
而邏輯啥的沒(méi)有問(wèn)題，在點(diǎn)擊事件里寫(xiě)console打印也沒(méi)反應(yīng)（就是根本不識(shí)別）。
搜索一下，發(fā)現(xiàn)可能是按鈕所在的組件被底部導(dǎo)航遮擋住了。
給導(dǎo)航的less樣式添加“z-index:-1”便可以使用了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)Step組件（步驟條組件）的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
react-native 封裝選擇彈出框示例(試用ios&android)
本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android)，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)自定義拖拽hook，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
一個(gè)路由就是一個(gè)映射關(guān)系(key:value),key為路徑, value可能是function或component,本文給大家介紹React 路由react-router-dom詳解,感興趣的朋友跟隨小編一起看看吧2024-01-01
通過(guò)React-Native實(shí)現(xiàn)自定義橫向滑動(dòng)進(jìn)度條的 ScrollView組件
開(kāi)發(fā)一個(gè)首頁(yè)擺放菜單入口的ScrollView可滑動(dòng)組件,允許自定義橫向滑動(dòng)進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序?yàn)榭v向由上至下依次排列,對(duì)React Native橫向滑動(dòng)進(jìn)度條相關(guān)知識(shí)感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了React useState的錯(cuò)誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
react echarts刷新不顯示問(wèn)題的解決方法
最近在寫(xiě)項(xiàng)目的時(shí)候遇到了一個(gè)問(wèn)題,當(dāng)編輯完代碼后echarts圖正常展示 , 可再次刷新頁(yè)面 , echarts會(huì)消失,所以本文給大家介紹了react echarts刷新不顯示問(wèn)題原因和解決方法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
React 遞歸手寫(xiě)流程圖展示樹(shù)形數(shù)據(jù)的操作方法
這篇文章主要介紹了React 遞歸手寫(xiě)流程圖展示樹(shù)形數(shù)據(jù)的操作方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要為大家介紹了簡(jiǎn)化Cocos和Native交互利器詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12