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

相关推荐
颂love13 小时前
Vue的两大生态以及组件通信
前端·javascript·vue.js·typescript
vim怎么退出13 小时前
Dive into React——事件系统
前端·react.js·源码阅读
hhb_61814 小时前
TypeScript泛型实战:企业级请求封装全解析
javascript·ubuntu·typescript
crack_comet14 小时前
修复 Claude Code TypeScript LSP 在 Windows 上启动失败的问题
windows·typescript·里氏替换原则
打小就很皮...16 小时前
基于 Python + LangChain + React 实现智能发票识别与验真系统实战
前端·react.js·langchain·ocr·发票识别
惢雨16 小时前
ts中的特殊符号说明并举例,如 ?. 、?:、??等
前端·typescript
圣殿骑士-Khtangc1 天前
单智能体落地实战:从 ReAct 到 Production-Ready AI Agent 全链路解析
人工智能·react.js
Patrick_Wilson1 天前
router.replace 之后紧跟 reload,页面为什么无限刷新?
javascript·react.js·浏览器
naildingding1 天前
3-ts接口 Interface
前端·typescript
ZengLiangYi1 天前
TypeScript 项目配置:tsconfig、ESM、路径别名
javascript·typescript·aigc