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

相关推荐
dorisrv1 分钟前
React 状态管理:Zustand 快速上手指南
前端·react.js
前端老宋Running25 分钟前
你的组件 API 为什么像个垃圾场?—— React 复合组件模式 (Compound Components) 实战教学
前端·react.js·架构
前端小臻39 分钟前
react中的函数组件和类组件(快捷指令和区别)
前端·react.js·前端框架
用户8168694747251 小时前
beginWork 与 completeWork 的内部职责分工
前端·react.js
灰灰勇闯IT1 小时前
RN跨端适配与沉浸式体验:适配不同设备与系统
javascript·react native·react.js
Swizard2 小时前
告别臃肿:为什么 Drizzle ORM 是 TypeScript 后端的未来?
typescript
你说啥名字好呢3 小时前
【React中的闭包陷阱】
javascript·react.js·ecmascript
心随雨下3 小时前
Flutter自适应布局部件(SafeArea 和 MediaQuery)总结
flutter·typescript
赵财猫._.3 小时前
React Native鸿蒙开发实战(八):打包发布与AppGallery上架
react native·react.js·harmonyos