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

相关推荐
selectDele2 小时前
Solid.js和React的比较
前端·javascript·react.js·solid.js
摘星编程2 小时前
React Native for OpenHarmony 实战:I18n 国际化详解
javascript·react native·react.js
摘星编程2 小时前
React Native for OpenHarmony 实战:Localization 本地化详解
javascript·react native·react.js
Amumu121382 小时前
React扩展(一)
前端·javascript·react.js
摘星编程3 小时前
React Native for OpenHarmony 实战:RTL 从右到左布局详解
javascript·react native·react.js
王同学 学出来4 小时前
React案例实操(二)
前端·react.js·前端框架
Irene19915 小时前
Vue3 中 PropType 的使用指南
typescript·proptype
孟无岐5 小时前
【Laya】Animator2D 使用指南
typescript·游戏引擎·游戏程序·laya
web小白成长日记6 小时前
从零起步,用TypeScript写一个Todo App:踩坑与收获分享
前端·javascript·typescript
摘星编程6 小时前
React Native for OpenHarmony 实战:Accessibility 辅助功能详解
javascript·react native·react.js