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

相关推荐
Qinana15 分钟前
从零开始实现 GitHub 仓库导航器(Windows 实操版)
react.js·前端框架·vite
南山安25 分钟前
React学习:Vite+React 基础架构分析
javascript·react.js·面试
一只叫煤球的猫41 分钟前
我做了一个“慢慢来”的开源任务管理工具:蜗牛待办(React + Supabase + Tauri)
前端·react.js·程序员
前端无涯2 小时前
react组件(4)---高阶使用及闭坑指南
前端·react.js
AAA阿giao3 小时前
从零开始学 React:用搭积木的方式构建你的第一个网页!
前端·javascript·学习·react.js·前端框架·vite·jsx
赵财猫._.3 小时前
React Native鸿蒙开发实战(十):鸿蒙NEXT深度适配与未来展望
react native·react.js·harmonyos
2401_860319523 小时前
在React Native鸿蒙跨平台开发采用分类网格布局,通过paramRow和paramLabel/paramValue的组合展示关键配置信息
react native·react.js·harmonyos
Zhi.C.Yue5 小时前
React 的位掩码标记系统
javascript·react.js·ecmascript
2301_796512525 小时前
使用如Redux、MobX或React Context等状态管理库来管理状态,React Native鸿蒙跨平台开发来实战
react native·react.js·harmonyos