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

相关推荐
BD10 小时前
Umi 项目核心库升级踩坑(Umi 3→4、React 16→18、Antd 3→4、涉及 Qiankun、MicroApp 微前端)
前端·react.js
We་ct10 小时前
LeetCode 224. 基本计算器:手写实现加减+括号运算
前端·算法·leetcode·typescript
Oscarzhang12 小时前
React 核心原理完全解析:从组件化、虚拟DOM到声明式编程
react.js
光影少年12 小时前
react中的filble架构和diffes算法如何实现的
前端·react.js·掘金·金石计划
We་ct14 小时前
LeetCode 141. 环形链表:两种解题思路详解
前端·算法·leetcode·链表·typescript
青青家的小灰灰15 小时前
React性能优化三剑客:useEffect、useMemo与useCallback实战手册
前端·react.js
David凉宸16 小时前
Vue 3 + TypeScript 企业级应用开发实战
前端·vue.js·typescript
阿蒙Amon17 小时前
TypeScript学习-第12章:与主流框架结合
javascript·学习·typescript
三十_17 小时前
TypeScript SDK Enum 运行时 404 问题解决方案
前端·typescript
Java陈序员17 小时前
酷监控!一款高颜值的监控工具!
react.js·docker