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

相关推荐
Irene199130 分钟前
在 Vue 中使用 TypeScript 的几种方式
vue.js·typescript
Blossom.1182 小时前
Transformer架构优化实战:从MHA到MQA/GQA的显存革命
人工智能·python·深度学习·react.js·架构·aigc·transformer
鹏多多2 小时前
jsx/tsx使用cssModule和typescript-plugin-css-modules
前端·vue.js·react.js
孟无岐3 小时前
【Laya】Laya 类使用说明
typescript·游戏引擎·游戏程序·laya
椰果uu4 小时前
vue-virtual-scroller-虚拟滚动列表:渲染不定高度长列表+可控跳转
前端·javascript·typescript·vue
Kagol4 小时前
深入浅出 TinyEditor 富文本编辑器系列之一:TinyEditor 是什么
前端·typescript·开源
神秘的猪头5 小时前
🎨 CSS 这种“烂大街”的技术,怎么在 React 和 Vue 里玩出花来?—— 模块化 CSS 深度避坑指南
css·vue.js·react.js
3秒一个大6 小时前
模块化 CSS:解决样式污染的前端工程化方案
css·vue.js·react.js
在西安放羊的牛油果6 小时前
浅谈 storeToRefs
前端·typescript·vuex
C_心欲无痕6 小时前
ts - 交叉类型
前端·git·typescript