[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了

如果想知道点击的是什么元素 ,打印他的nodename就行了

不过得断言为html元素才行

javascript 复制代码
  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    console.log('current', (e.target as HTMLElement).nodeName);
  };

为什么要断言是html元素?

EventTarget 是所有事件目标(包括 DOM 元素、XMLHttpRequest、WebSocket 等)的基类。并不是所有继承自 EventTarget 的对象都具备 nodeName 属性,nodeName 这个属性是 HTMLElement 类型特有的。因此,只有在 EventTarget 的具体子类是 HTMLElement 或其更具体的子类时,才会有 nodeName 属性。

(XMLHttpRequest, WebSocket)并没有 nodeName属性, 懂了吗

相关推荐
康小旺4 小时前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
vue.js·typescript
ZoeLandia12 小时前
React08:自定义 Hook
开发语言·前端·react.js·typescript
aloha_7892 天前
HTML、JavaScript 与 TypeScript 基础速查
javascript·typescript·html
空中湖2 天前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
离歌漠2 天前
《我用 Tauri 做了一个本地开发工具箱》
rust·typescript·vue
enjoy编程2 天前
playwright学习-I
typescript·vue·nodejs·1024程序员节·playwright
iDao技术魔方3 天前
Bun v1.4.4 实战:用 bun fmt 替掉 prettier 的 5 个步骤
typescript·1024程序员节
梅雅达编程笔记3 天前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈
康小旺3 天前
TypeScript 编译器开始卷 Rust 了:Cloudflare 的 tsrs 到底想干嘛?
rust·typescript
来一首_We_go3 天前
React Flow Pro 高级交互实现
前端·react.js