React事件綁定詳解
更新時間：2021年12月16日 17:09:25 作者：Fx_cap
這篇文章主要為大家介紹了React事件綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
- React事件綁定和原生DOM事件綁定相似
- 語法:on+事件名={事件處理程序} 例如:onClick={()=>{}}
- 注意:React事件采用駝峰命名法
類組件事件綁定
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
handleClick() {
console.log(111);
}
render() {
return (<button onClick={this.handleClick} > 點我</button >)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
函數(shù)組件事件綁定
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
function handleClick() {
console.log(111);
}
// 函數(shù)組件內(nèi)沒有this,所以直接寫函數(shù)名,不需要加 this.
return (<button onClick={handleClick}>點我</button>)
}
ReactDOM.render(<App />, document.getElementById('root'))
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
本篇文章主要介紹了react-native-fs插件的使用以及遇到的坑，詳細的介紹了react-native-fs安裝使用，具有一定的參考價值，有興趣的可以了解一下2017-09-09
MUI是一款基于React的UI組件庫，可以方便地構(gòu)建美觀的用戶界面，使用MUI的DataTable組件和分頁器組件可以輕松實現(xiàn)用戶列表分頁功能，這篇文章使用MUI庫實現(xiàn)了用戶列表分頁功能，感興趣的同學可以參考下文2023-05-05
React Native react-navigation 導航使用詳解
本篇文章主要介紹了React Native react-navigation 導航使用詳解，詳解的介紹了react-navigation導航的使用，具有一定的參考價值，有興趣的可以了解一下2017-12-12
React項目中使用zustand狀態(tài)管理的實現(xiàn)
zustand是一個用于狀態(tài)管理的小巧而強大的庫,本文主要介紹了React項目中使用zustand狀態(tài)管理的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-12-12
這篇文章主要介紹了使用store來優(yōu)化React組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要簡單分析了React中的EffectList，幫助大家更好的理解和學習使用React進行前端開發(fā)，感興趣的朋友可以了解下2021-04-04
React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗，構(gòu)建世界一流的原生APP。接下來通過本文給大家分享React Native項目框架搭建的一些心得體會，感興趣的朋友跟隨小編一起看看吧2021-05-05
React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)
這篇文章主要介紹了React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了詳解Ant Design of React的安裝和使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12