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

相关推荐
用户938515635077 小时前
TypeScript 高级类型 + CSS 三列布局:从类型体操到样式工程的进阶之路
css·面试·typescript
半个落月11 小时前
React 组件通信进阶:useContext 与自定义 Hook 实战详解
前端·react.js
moMo11 小时前
深入 NestJS:从工厂模式到装饰器模式的架构之美
typescript·nestjs
光影少年11 小时前
react navite 长列表优化:FlatList / SectionList 原理与优化属性
前端·react native·react.js
烬羽19 小时前
NestJS 依赖注入:Controller 里那个没有 new 的 service,到底从哪来的?
设计模式·typescript·nestjs
张元清19 小时前
React scrollIntoView + useRef:滚动到指定元素 (2026)
javascript·react.js
渣波19 小时前
NestJS 企业级后端架构实战:从核心代码到工程化思维的深度重构
前端·typescript·nestjs
光影少年19 小时前
RN 常见性能问题:JS卡顿、UI卡顿、桥接通信耗时
前端·react native·react.js