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

相关推荐
小粉粉hhh8 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
索西引擎10 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
不好听61312 小时前
前端路由完全指南(上篇):从原理到 6 种路由模式
前端·react.js
不好听61312 小时前
前端路由完全指南(中篇):React Router Hooks 完全指南
前端·react.js
ndsc_d14 小时前
前端实战复盘:用AI直接生成响应式官网落地页与React源码
前端·人工智能·react.js·ui·前端框架·aigc·paico
@@@@@@@@5416 小时前
JavaScript 的缺点与 TypeScript 的弥补
开发语言·javascript·typescript
用户09340777351417 小时前
HarmonyOS WPS Open SDK 实践:最小打开闭环与 enableEdit 分支处理
typescript·harmonyos
鸠摩智首席音效师17 小时前
如何在 macOS 上创建 React.js 应用程序 ?
前端·react.js·macos
TheITSea18 小时前
4、React+Tailwind CSS
前端·css·react.js
我是大卫18 小时前
【图】React源码解析-从源码数据结构、依赖算法、调度流水线到内存管理,深挖useEffect的全部核心机制
react.js·源码