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

相关推荐
掰头战士12 小时前
多重影分身!恨不得把一个agent掰成两个? 还真能干!
typescript·llm·agent
shmily麻瓜小菜鸡16 小时前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript
晚安日记wanna20 小时前
React 为何不做双端 diff?Vue 与 React 更新逻辑的三层差异
前端·react.js·面试
光影少年20 小时前
setImmediate 和 setTimeout(0) 的区别
android·前端·react.js·ios·前端框架
雾隐隐o1 天前
TypeScript 基础:数据类型、接口与类型推论
typescript
flash俊杰2 天前
Zod Schema 驱动的 IPC 契约:从入参校验到状态机一致性的三层防御
javascript·typescript
愛芳芳2 天前
基于 Electron + Vue3 的仿 PC 微信客户端项目实战
前端·javascript·css·elementui·typescript·electron·vue
用户298698530142 天前
前端如何把 TXT 文本文件转成 Word 文档:React 实践
前端·javascript·react.js
神秘的猪头3 天前
TypeScript 高级用法全解析:从泛型到 infer,把类型系统真正用起来
前端·typescript