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

相关推荐
小四的小六22 分钟前
我用什么技术做了TLDR Scholar?
typescript·ai编程
爱滑雪的码农23 分钟前
React Native 完整开发全流程(从零到上线)
javascript·react native·react.js
Maimai108081 小时前
React 多步骤表单工程化落地:从 Zod Schema、React Hook Form 到 Zustand 持久化
前端·javascript·react.js·前端框架·状态模式
Maimai108081 小时前
React Query + Zustand 正确结合方式:不要把接口数据复制进 Store
前端·javascript·react.js·前端框架·web3·状态模式
Maimai108081 小时前
Zustand 项目落地:从全局状态、Store 拆分到真实业务封装
前端·react.js·前端框架·状态模式
放下华子我只抽RuiKe52 小时前
React 从入门到生产(五):状态管理选型
前端·javascript·人工智能·深度学习·react.js·前端框架·ecmascript
卸任2 小时前
为Tiptap富文本编辑器增加Word导出功能
前端·react.js
阿正的梦工坊2 小时前
【Typescript】06-类型缩小与控制流分析
前端·javascript·typescript
阿正的梦工坊2 小时前
【Typescript】03-函数对象与接口
前端·javascript·typescript
右耳朵猫AI3 小时前
React技术周刊 2026年第16周
前端·react.js·前端框架