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

相关推荐
OpenTiny社区8 小时前
操作ArkTS页面跳转及路由相关心得
前端·typescript·web·opentiny
柠檬の夏季8 小时前
TypeScript入门
typescript
万物皆对象6668 小时前
切换路由时页面空白问题(vue3)
前端·vue.js·typescript
突然好热8 小时前
TS 调试技巧
前端·javascript·typescript
GISer_Jing13 小时前
前端沙箱开源项目推荐(React/Next/Vue优先)
前端·react.js·开源
晓杰'16 小时前
从0到1实现Balatro游戏后端(5):得分计算与单局结算流程实现
后端·typescript·node.js·游戏开发·项目实战·nestjs·webscoket
暗不需求16 小时前
React 性能优化秘籍:深入理解 `useMemo` 与 `useCallback`
前端·react.js·面试
追光者♂17 小时前
【测评系列3】CSDN AI数字营销实测体验官:测试 开源项目——Superpowers 游戏引擎从零开发实战指南
人工智能·深度学习·机器学习·typescript·开源·游戏引擎·superpowers
ct97817 小时前
TypeScript 中的泛型
前端·javascript·typescript
向上的车轮17 小时前
React 19 快速入门:拥抱服务端组件与新特性的现代化开发
前端·javascript·react.js