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

相关推荐
We་ct13 小时前
LeetCode 136. 只出现一次的数字:线性时间+常量空间最优解拆解
前端·算法·leetcode·typescript·位运算
紫_龙1 天前
最新版vue3+TypeScript开发入门到实战教程之重要详解readonly/shallowReadOnly
前端·javascript·typescript
:mnong1 天前
Claude Code 项目设计分析
typescript·claude code
Irene19911 天前
推荐 React 开发需要在 VS Code 中安装的插件
react.js
人民广场吃泡面1 天前
React新手快速入门学习指南(2026最新版)
前端·react.js·前端框架
人人常欢笑1 天前
Grafana 表格自定义下载样式。
javascript·react.js·grafana
ZhaoJuFei1 天前
React生态学习路线
前端·学习·react.js
早點睡3901 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-calendar-events(读取不到日历里新增的事件,待排查)
javascript·react native·react.js
Cxiaomu1 天前
像ChatGPT一样逐字输出:React + TypeScript 流式接收与“打字机”效果实现方案
人工智能·react.js·chatgpt·typescript
We་ct1 天前
LeetCode 191. 位1的个数:两种解法详解
前端·算法·leetcode·typescript