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

相关推荐
紫_龙34 分钟前
最新版vue3+TypeScript开发入门到实战教程之路由详解二
前端·javascript·typescript
张元清1 小时前
Pareto 3.0 发布:基于 Vite 7 的轻量级 React SSR 框架
前端·react.js
小时前端1 小时前
react状态管理:踩坑无数后,我为什么选择了 Zustand?
前端·react.js
吴声子夜歌2 小时前
TypeScript——VSCode搭建开发环境
javascript·vscode·typescript
哈__2 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-chart-kit
javascript·react native·react.js
qq_406176142 小时前
React与Vue异同点及优缺点深度解析
前端·vue.js·react.js
abigale0312 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
英俊潇洒美少年13 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
kyriewen1114 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年14 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js