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

相关推荐
退休倒计时12 小时前
【每日一题】LeetCode 142. 环形链表 II TypeScript
算法·leetcode·链表·typescript
放下华子我只抽RuiKe513 小时前
FastAPI 全栈后端(四):认证与授权
开发语言·前端·javascript·python·深度学习·react.js·fastapi
夕夕木各17 小时前
探究 TypeScript 类型体操里的 Equal 和 IsAny
typescript·源码阅读
GuWenyue17 小时前
10分钟搞定TodoList实战!从0搭建Bun+TS的RESTful接口服务
前端·typescript·bun
liveling17 小时前
我用 React 19 + TypeScript 搭了个 AI 智能题库平台,还把它托管上线了(附在线 Demo)
react.js
大家的林语冰18 小时前
React 生态大迁徙,脸书源码仓库跑路,核心技术栈全员加盟 React 基金会!
前端·javascript·react.js
rising start19 小时前
九、vue3 组件通信:全场景详解
前端·vue.js·typescript
向上的车轮19 小时前
TypeORM 1.0 正式发布:新一代 Node.js ORM 框架全面解析
typescript·node.js·typeorm
vim怎么退出20 小时前
Dive into React——高级特性
前端·react.js·源码阅读