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

相关推荐
谷哥的小弟9 小时前
TypeScript数组类型
javascript·typescript
我是大卫9 小时前
React源码解析-第一部分:宏观架构
前端·react.js·源码
我是大卫10 小时前
React源码解析-第二部分:更新与调度
前端·react.js·源码
退休倒计时10 小时前
【每日一题】LeetCode 199. 二叉树的右视图 TypeScript
算法·leetcode·typescript
用户2986985301415 小时前
如何在 JavaScript 和 React 中下载/导出 Excel 文件
前端·javascript·react.js
随风一样自由16 小时前
【前端+React+缓存竞态】导航切换缓存刷新机制
前端·react.js·缓存
binbin_5216 小时前
React Native 鸿蒙环境搭建完整实战:从 RN 工程到 RNOH 运行
深度学习·react native·react.js·harmonyos
kgduu17 小时前
react-redux学习笔记
笔记·学习·react.js
前端之虎陈随易1 天前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
YFF菲菲兔1 天前
其他 Hooks 解析
react.js