React點擊事件的兩種寫法小結(jié)
更新時間：2022年12月02日 08:38:45 作者：叉叉醬
這篇文章主要介紹了React點擊事件的兩種寫法小結(jié)，具有很好的參考價值，希望對大家有所幫助。
React點擊事件寫法
1.bind綁定（推薦）
第一個參數(shù)指向this，第二個參數(shù)開始才是事件函數(shù)接收到的參數(shù)，事件對象event默認(rèn)是最后一個參數(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")}>點擊</button>
? ? ? ? </React.Fragment>
? ? )
}
...這里的話綁定this可以統(tǒng)一寫，這樣代碼看起來整潔點。
...
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')}>點擊</button>
? ? ? ? </React.Fragment>
? ? )
}
...2.箭頭函數(shù)
箭頭函數(shù)若要傳事件對象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)}>點擊</button>
? ? ? ? </React.Fragment>
? ? )
}
...React點擊事件不好用，可能是被其他組件遮擋
入門React不久，練習(xí)例子的時候發(fā)現(xiàn)點擊退出事件不好用。
而邏輯啥的沒有問題，在點擊事件里寫console打印也沒反應(yīng)（就是根本不識別）。
搜索一下，發(fā)現(xiàn)可能是按鈕所在的組件被底部導(dǎo)航遮擋住了。
給導(dǎo)航的less樣式添加“z-index:-1”便可以使用了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文詳細(xì)的介紹了React傳遞參數(shù)的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了React如何避免重渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了React Native自定義控件底部抽屜菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了React中事件的類型定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了解決jest處理es模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了React DnD如何處理拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了React的createElement方法源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
在?React?中如何從狀態(tài)數(shù)組中刪除一個元素
這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個元素,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03