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

相关推荐
我是大卫13 小时前
【图】React源码解析-第四部分:事件与跨层传递
react.js·源码
张元清14 小时前
React useReducedMotion Hook:尊重 prefers-reduced-motion(2026)
javascript·react.js
PBitW15 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?💡
前端·typescript
用户2986985301416 小时前
前端 Excel 处理进阶:React 中合并与取消合并单元格的实现
前端·javascript·react.js
老王以为16 小时前
Fiber 节点 —— 一个数据结构如何承载整个 React 运行时
前端·react native·react.js
mONESY16 小时前
ReAct 智能体循环与 JavaScript 异步并发原理深度解析
react.js
敖行客 Allthinker17 小时前
前端调试实战:DevTools调试工具 + 二分定位Bug法全总结
前端·typescript·chrome devtools
不瘦80斤不改名17 小时前
HalfCart:基于LBS的1\.5km本地拼单系统全栈实践与踩坑复盘
python·docker·typescript·pycharm
北辰alk1 天前
Next.js 全栈开发指南:从项目初始化到生产环境部署
react.js