React事件处理机制详解

最新推荐文章于 2025-02-08 20:56:49 发布

前端青山

最新推荐文章于 2025-02-08 20:56:49 发布

阅读量1.4k

点赞数 52

分类专栏： React篇文章标签： javascript react.js 前端开发语言

前端青山

本文链接：https://blog.csdn.net/2302_76329106/article/details/143915488

版权

🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:React-

前言

在前端开发中，事件处理是构建交互式用户界面的关键部分。React 作为一个流行的 JavaScript 库，提供了丰富的事件处理机制，使得开发者能够更高效地管理事件。本文将详细介绍 React 中事件处理的基本概念，包括 ES5 和 ES6 语法的事件绑定方法，并深入探讨 React 合成事件的特点及其内部机制。

1.3.4 合成事件、原生事件之间的冒泡执行关系

总结

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

1 ES5语法绑定事件

1.1 无参数的绑定

1.1.1 方法一

定义函数

handleClick(e) { // e - 事件对象
  e.preventDefault();
  // doSomething ...
}

constructor 中绑定函数执行上下文

this.handleClick = this.handleClick.bind(this);

jsx中调用

<button onClick={this.hanleClick} />

1.1.2 方法二

定义函数

handleClick(e) { // e - 事件对象
  e.preventDefault();
  // doSomething ...
}

jsx 中调用

<button onClick={this.hanleClick.bind(this)} />

1.1.2 有参数的绑定

定义函数

handleClick(param1, param2, e) {
  e.preventDefault();
  // do something ...
}

注意此时无论多少个参数， e 一定放在最后

jsx 中调用

<button onClick={this.hanleClick.bind(this, 'x', 'xx')} />

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'

// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
// import App from './10-App-state-es7'
// import App from './11-App-setState-function'
// import App from './12-App-setState-object'
// import App from './13-App-setSt