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

相关推荐
YFF菲菲兔9 小时前
React 事件系统:addTrappedEventListener
react.js
无情的西瓜皮10 小时前
MCP 协议实战:从零搭建一个 MCP 服务器(Node.js 版)
vue.js·人工智能·typescript·node.js
小妖66610 小时前
React input 输入卡顿问题
前端·javascript·react.js
退休倒计时12 小时前
【每日一题】LeetCode 78. 子集 TypeScript
算法·leetcode·typescript
学习-学习14 小时前
Node.js 现在能直接跑 TypeScript 了?Type Stripping 原理、限制与 tsx / ts-node 取舍
typescript·node.js
小二·1 天前
React 19 + Next.js 15 现代前端开发实战:App Router / Server Components / 流式渲染
前端·javascript·react.js
yume_sibai1 天前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript
YFF菲菲兔1 天前
React 事件系统:listenToAllSupportedEvents
react.js
光影少年2 天前
RN 渲染原理:不依赖WebView,原生控件渲染
前端·react native·react.js·前端框架
孟无岐2 天前
LayaAir IDE 插件开发入门:用 TypeScript 给编辑器加一个自己的面板
typescript·游戏开发·工程化·编辑器扩展·layaair·ide 插件