React事件綁定詳解
更新時(shí)間:2021年12月16日 17:09:25 作者:Fx_cap
這篇文章主要為大家介紹了React事件綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
- 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} > 點(diǎn)我</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}>點(diǎn)我</button>) } ReactDOM.render(<App />, document.getElementById('root'))
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
使用React?MUI庫實(shí)現(xiàn)用戶列表分頁功能
MUI是一款基于React的UI組件庫,可以方便地構(gòu)建美觀的用戶界面,使用MUI的DataTable組件和分頁器組件可以輕松實(shí)現(xiàn)用戶列表分頁功能,這篇文章使用MUI庫實(shí)現(xiàn)了用戶列表分頁功能,感興趣的同學(xué)可以參考下文2023-05-05React Native react-navigation 導(dǎo)航使用詳解
本篇文章主要介紹了React Native react-navigation 導(dǎo)航使用詳解,詳解的介紹了react-navigation導(dǎo)航的使用,具有一定的參考價(jià)值,有興趣的可以了解一下2017-12-12React項(xiàng)目中使用zustand狀態(tài)管理的實(shí)現(xiàn)
zustand是一個(gè)用于狀態(tài)管理的小巧而強(qiáng)大的庫,本文主要介紹了React項(xiàng)目中使用zustand狀態(tài)管理的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10React Native項(xiàng)目框架搭建的一些心得體會(huì)
React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗(yàn),構(gòu)建世界一流的原生APP。接下來通過本文給大家分享React Native項(xiàng)目框架搭建的一些心得體會(huì),感興趣的朋友跟隨小編一起看看吧2021-05-05React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)
這篇文章主要介紹了React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09