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

相关推荐
Highcharts.js3 小时前
用Highcharts如何动态向一个序列添加点
前端·javascript·react.js·highcharts
TechMasterPlus4 小时前
Hermes 深度解析:React Native 高性能 JavaScript 引擎实践指南
javascript·react native·react.js
FanetheDivine5 小时前
自定义useChat管理AI会话
前端·react.js·aigc
深海鱼在掘金6 小时前
Next.js从入门到实战保姆级教程(第十四章):性能优化深度实践
前端·typescript·next.js
深海鱼在掘金6 小时前
Next.js从入门到实战保姆级教程(第十三章):从原理到实践深度剖析缓存策略
前端·typescript·next.js
谷子熟了7 小时前
电商智能客服系统本地搭建
经验分享·docker·typescript·ai编程·llama
yqcoder8 小时前
React 深度解析:类组件 (Class) vs 函数组件 (Function)
前端·javascript·react.js
zhensherlock10 小时前
Protocol Launcher 系列:Working Copy 文件操作与高级命令详解
javascript·git·typescript·node.js·自动化·github·js
lichenyang45311 小时前
从零到一:用 Taro + React 搭建数据采集小程序
react.js·小程序·taro
深海鱼在掘金19 小时前
Next.js从入门到实战保姆级教程(第十一章):错误处理与加载状态
前端·typescript·next.js