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路由的history對象的插件history的使用解讀
這篇文章主要介紹了React路由的history對象的插件history的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了React 實現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程
這篇文章主要介紹了React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程,本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
react中多個頁面,數(shù)據(jù)相互依賴reducer問題及解決
文章介紹了一個電商商品管理頁面的復(fù)雜狀態(tài)管理場景,使用useReducer或useImmerReducer來集中管理狀態(tài),避免組件間直接監(jiān)聽,簡化聯(lián)動邏輯,防止死循環(huán),并便于維護和擴展2025-12-12
眾所周知，react推出了hooks之后，很多項目就開始往hooks上靠攏，所以也就出現(xiàn)了class和hooks交叉使用的項目。這個時候使用ref需要注意一些東西2021-06-06
這篇文章主要為大家介紹了useState?解決文本框無法輸入的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
生命周期函數(shù)指在某一時刻組件會自動調(diào)用并執(zhí)行的函數(shù)。React每個類組件都包含生命周期方法，以便于在運行過程中特定的階段執(zhí)行這些方法2022-11-11
react打包優(yōu)化和本地預(yù)覽的實現(xiàn)
本文主要介紹了react打包優(yōu)化和本地預(yù)覽的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
這篇文章主要介紹了vite+react+tailwindcss的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React中useCallback useMemo使用方法快速精通
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時，默認(rèn)情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2023-02-02