[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了

如果想知道点击的是什么元素 ,打印他的nodename就行了

不过得断言为html元素才行

javascript 复制代码
  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    console.log('current', (e.target as HTMLElement).nodeName);
  };

为什么要断言是html元素?

EventTarget 是所有事件目标(包括 DOM 元素、XMLHttpRequestWebSocket 等)的基类。并不是所有继承自 EventTarget 的对象都具备 nodeName 属性,nodeName 这个属性是 HTMLElement 类型特有的。因此,只有在 EventTarget 的具体子类是 HTMLElement 或其更具体的子类时,才会有 nodeName 属性。

(XMLHttpRequest, WebSocket)并没有 nodeName属性, 懂了吗

相关推荐
红尘散仙12 小时前
一套 Rust 核心,跑通 Tauri + React Native
react native·react.js·rust
贫民窟的勇敢爷们17 小时前
React跨平台能力,打破前端开发的平台边界
前端·react.js·前端框架
朝阳3918 小时前
React【面试】
前端·react.js·面试
漓漾li19 小时前
每日面试题(2026-05-15)- 前端
前端·vue.js·react.js
用户6000718191019 小时前
【翻译】在 React Router 中理清对话框
react.js
小杍随笔1 天前
【iNovel 前端架构深度解析:基于 Vue 3 + TypeScript + Tauri 的跨端小说写作工具】
前端·架构·typescript
光影少年1 天前
react的 useState 原理、批量更新机制
前端·react.js·掘金·金石计划
Swift社区1 天前
Flutter / React / ArkUI:在鸿蒙 PC 上怎么选?
flutter·react.js·harmonyos
学习论之费曼学习法1 天前
ReAct框架深度解析:让Agent会思考再行动
前端·react.js·前端框架
openKaka_1 天前
completeWork:真实 DOM 是在哪里被创建的
前端·javascript·react.js