[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属性, 懂了吗

相关推荐
shadow fish6 小时前
react学习记录(三)
javascript·学习·react.js
NEXT067 小时前
受控与非受控组件
前端·javascript·react.js
早點睡3908 小时前
高级进阶 React Native 鸿蒙跨平台开发:react-native-svg(CAPI) 矢量图形代码指南
react native·react.js·harmonyos
呆子小木心9 小时前
Vue2或Vue3项目引用百度地图
javascript·vue.js·typescript·前端框架·html5
Swift社区9 小时前
React 项目生产环境构建与静态资源优化
前端·react.js·前端框架
ZaneAI9 小时前
🚀 Vercel AI SDK 使用指南: 子代理 (Subagents)
react.js·agent
ZaneAI10 小时前
🚀 Vercel AI SDK 使用指南:Call Options 动态配置 Agent
typescript·agent
3秒一个大16 小时前
深入解析 React 回到顶部(BackToTop)组件的实现与设计
前端·react.js·typescript
不想秃头的程序员17 小时前
TypeScript 核心基础知识
前端·面试·typescript
Jing_Rainbow18 小时前
【React-9/Lesson93(2025-12-30)】React Hooks 深度解析:从基础到实战🎯
前端·javascript·react.js