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

相关推荐
夕夕木各2 小时前
探究 TypeScript 类型体操里的 Equal 和 IsAny
typescript·源码阅读
GuWenyue2 小时前
10分钟搞定TodoList实战!从0搭建Bun+TS的RESTful接口服务
前端·typescript·bun
liveling2 小时前
我用 React 19 + TypeScript 搭了个 AI 智能题库平台,还把它托管上线了(附在线 Demo)
react.js
大家的林语冰4 小时前
React 生态大迁徙,脸书源码仓库跑路,核心技术栈全员加盟 React 基金会!
前端·javascript·react.js
rising start4 小时前
九、vue3 组件通信:全场景详解
前端·vue.js·typescript
向上的车轮5 小时前
TypeORM 1.0 正式发布:新一代 Node.js ORM 框架全面解析
typescript·node.js·typeorm
vim怎么退出6 小时前
Dive into React——高级特性
前端·react.js·源码阅读
Csvn6 小时前
React useEffect 异步竞态:90% 的人都踩过的坑
前端·react.js
qq_363066937 小时前
react 使用web component导出静态html报告
前端·react.js·html·页面导出