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

相关推荐
光影少年14 小时前
开发RN项目时,如何调试iOS真机、Android真机?常见调试问题排查?
android·前端·react native·react.js·ios
zero159715 小时前
TypeScript 快速实战系列:核心进阶|接口(Interface) + 类型(Type):大模型开发神器
前端·typescript·大模型编程语言
落魄江湖行15 小时前
基础篇九 Nuxt4 插件系统:扩展 Nuxt 能力
前端·vue.js·typescript·nuxt4
Bigger15 小时前
第六章:我是如何剖析 Claude Code 的终端界面渲染原理的
前端·react.js·claude
榴莲omega16 小时前
第14天:React 工程化与设计模式
前端·react.js·设计模式
前端那点事1 天前
React 18+ 所有Hooks全解析(含实战示例,新手零踩坑)
react.js
snow_yan1 天前
AI 对话流式输出: 实现“逐字丝滑、不闪烁、不卡顿”的打字机效果
前端·react.js·openai
Ava的硅谷新视界1 天前
TypeScript 中用判别联合类型替代 instanceof 检查
前端·javascript·typescript
落魄江湖行1 天前
基础篇六 Nuxt4 状态管理:useState 的正确用法
前端·vue.js·typescript·nuxt4
军军君011 天前
数字孪生监控大屏实战模板:智慧城市大屏
前端·vue.js·typescript·前端框架·echarts·智慧城市·大屏展示