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

相关推荐
开发者小天6 小时前
react中useEffect的用法,以及订阅模式的原理
前端·react.js·前端框架
coderHing[专注前端]10 小时前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
开发语言·前端·javascript·react.js·前端框架·ecmascript
代码小学僧11 小时前
从 Arco Table 迁移到 VTable:VTable使用经验分享
前端·react.js·开源
San3012 小时前
深度驱动:React Hooks 核心之 `useState` 与 `useEffect` 实战详解
javascript·react.js·响应式编程
@大迁世界12 小时前
面了 100+ 次前端后,我被一个 React 问题当场“打回原形”
前端·javascript·react.js·前端框架·ecmascript
骑驴看星星a13 小时前
【回顾React的一些小细节】render里不可包含的东西
前端·javascript·react.js
San30.13 小时前
现代前端工程化实战:从 Vite 到 React Router demo的构建之旅
前端·react.js·前端框架
烟袅14 小时前
深入理解 React 中 useState 与 useEffect
前端·javascript·react.js
行走的陀螺仪14 小时前
前端基建从0到1搭建步骤清单(含工具选型+配置要点+落地注意事项)
前端·javascript·typescript·设计规范·前端工程化·规范化·前端基建