当前位置: 首页 > news >正文

事件在react中的处理方式?

一、React 事件的本质

在 React 中,事件不是原生的 DOM 事件,而是 合成事件(SyntheticEvent)。

React 自己实现了一套跨浏览器的事件系统,用于封装原生事件,让你在所有浏览器中都能一致地使用。

也就是说:

<button onClick={handleClick}>点击</button>

这里的 onClick 并不是直接绑定在 DOM 上的,而是 React 统一注册的。

二、React 事件的绑定方式

在 JSX 中以驼峰命名方式绑定

React 事件属性用 小写 on + 大写首字母事件名 的形式,例如:

  • onClick

  • onChange

  • onMouseEnter

  • onSubmit

示例:
function App() {function handleClick() {console.log("按钮被点击");}return <button onClick={handleClick}>点我</button>;
}

注意:不能写成 onclick="handleClick()"(那是 HTML 写法)

传参的写法

当你要给事件传参时,需要用箭头函数包一下:

<button onClick={() => handleClick(id)}>删除</button>

或者绑定时:

<button onClick={handleClick.bind(this, id)}>删除</button>

类组件中的事件

在类组件中,你可以这样写:

class App extends React.Component {handleClick = (event) => {console.log('点击事件', event);};render() {return <button onClick={this.handleClick}>点我</button>;}
}

箭头函数写法可以自动绑定 this,不然要在构造函数中 this.handleClick = this.handleClick.bind(this)。

React 合成事件对象(SyntheticEvent)

React 事件的回调会接收一个合成事件对象:

function handleClick(e) {console.log(e); // SyntheticEventconsole.log(e.nativeEvent); // 原生事件
}

特点:

  • 兼容所有浏览器;

  • 在事件池中复用(异步中要先调用 e.persist() 保留事件);

示例:

function handleClick(e) {e.preventDefault(); // 阻止默认行为e.stopPropagation(); // 阻止冒泡
}

事件冒泡与捕获

React 的事件默认是冒泡阶段触发的。

如果要监听捕获阶段,加上 Capture:

<div onClickCapture={handleCapture}><button onClick={handleBubble}>点我</button>
</div>

执行顺序:

  1. 捕获阶段:父的 onClickCapture

  2. 冒泡阶段:子的 onClick

  3. 冒泡阶段:父的 onClick

React 事件与原生事件的区别总结

对比项 React事件 原生DOM事件
注册方式 JSX属性(onClick) addEventListener
事件名 驼峰命名 小写
对象类型 SyntheticEvent Event
绑定位置 统一代理到 root(React 18是 root container) 绑定到具体元素
跨浏览器兼容
阻止默认行为 e.preventDefault() event.preventDefault()

React 18 的变化

React 18 开始,事件代理不再统一绑定到 document,而是绑定到 React 根节点(root)。
这样多个 React 应用可以共存,互不影响。

常见事件示例

<input onChange={(e) => console.log(e.target.value)} />
<form onSubmit={(e) => e.preventDefault()} />
<div onMouseEnter={() => console.log('鼠标进入')} />
http://www.hskmm.com/?act=detail&tid=32856

相关文章:

  • volcano源码阅读——action/enqueue
  • 2025年工业大吊扇厂家权威推荐榜:大型厂房通风降温设备源头企业综合实力与客户口碑深度解析
  • 【左扬精讲】SRE 别慌!我用 故障预测与诊断,性能评估与优化,资源分配与规划 讲概率与贝叶斯算法的实战应用,都是咱运维人能懂的话(含代码)
  • 农经权报表生成小程序介绍
  • 【2025-10-16】移居香港
  • 学校社团招新的题目(莫队+树状数组统计区间逆序对个数)(蒟蒻被薄纱QAQ)
  • 基于MATLAB的齿轮故障检测
  • Linux 中检测gz压缩文件是否损坏
  • 2025年信息流代运营服务商权威推荐榜:专业投放策略与高转化效果深度解析,助力企业精准营销
  • 2025 年 PP 管厂家最新推荐榜:全面甄选优质 pp 风管、PP 喷淋塔等产品厂家,助力实验室场景精准选型
  • 基于MATLAB的无线传感器网络(WSN)仿真程序实现
  • NMAP扫描
  • MyEMS:衔接 “双控” 政策与企业实践的开源能源管理利器
  • 权限维持-Windows权限维持
  • LVGL
  • 2025 电动轮椅厂家最新推荐榜:深度解析智能轻便 / 长续航 / 高安全国产优质品牌核心优势
  • 2025年信息流代运营服务商权威推荐榜单:专业投放策略与高效转化服务口碑之选
  • 一些框架
  • 1017
  • 2025 建筑工程施工总包公司最新推荐榜:聚焦质量管控与新锐势力,优质企业权威甄选
  • 2025 广州人力资源/派遣/外包/劳务外包/人事代理/推荐榜:精典人才创新 5 星领跑,适配招聘 / 测评 / 培训全场景企业需求
  • 反事实推理防御AI黑客攻击技术解析
  • 2025 年选矿行业 2 号油厂家最新推荐排行榜:环保型 / 新型 / JQ202/101/QX/BK201/323 起泡剂等产品权威筛选,助力企业选对优质供应商
  • 2025 年探伤仪厂商最新推荐榜单:涡流 / 超声波 / 管材 / 焊缝 / 无损探伤仪优质企业权威盘点
  • 微调 - Lora
  • 2025 年罗茨风机厂家最新推荐排行榜权威发布!深度解析各品牌优势助企业精准选型UNTW无泄漏/BRW水冷式罗茨风机厂家推荐
  • GoogleNet
  • 2025磨床主轴定制/磨床主轴非标定制/国产/进口/内圆/外圆/无心/平面/来图定制磨床电主轴厂家推荐榜:技术与口碑双优之选
  • 【树莓派】安装PostgreSQL
  • 2025年轮胎厂家权威推荐榜:舒适轮胎,耐磨轮胎,高性能轮胎与静音轮胎全系列选购指南