快捷導(dǎo)航

React事件綁定詳解

更新時(shí)間：2021年12月16日 17:09:25 作者：Fx_cap

這篇文章主要為大家介紹了React事件綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

類(lèi)組件事件綁定

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)沒(méi)有this,所以直接寫(xiě)函數(shù)名,不需要加 this.
  return (<button onClick={handleClick}>點(diǎn)我</button>)
}
ReactDOM.render(<App />, document.getElementById('root'))

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

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