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

相关推荐
cz追天之路13 分钟前
华为机考 ------ 识别有效的IP地址和掩码并进行分类统计
javascript·华为·typescript·node.js·ecmascript·less·css3
C_心欲无痕4 小时前
react - Suspense异步加载组件
前端·react.js·前端框架
博主花神5 小时前
【React】UI库Antd和Redux状态管理
react.js·ui·arcgis
BlackWolfSky6 小时前
React中文网课程笔记2—实战教程之井字棋游戏
笔记·react.js·游戏
BlackWolfSky6 小时前
React中文网课程笔记1—快速入门
前端·笔记·react.js
借个火er6 小时前
用 Tauri 2.0 + React + Rust 打造跨平台文件工具箱
react.js·rust
星光不问赶路人6 小时前
TypeScript 架构实践:从后端接口到 UI 渲染数据流的完整方案
前端·vue.js·typescript
码界奇点7 小时前
基于React与TypeScript的后台管理系统设计与实现
前端·c++·react.js·typescript·毕业设计·源代码管理
CodeCaptain7 小时前
一个快速校验地图资源是否符合兼容要求的小脚本(Cocos Creator3.8.0)
游戏·typescript·cocos2d
前端小咸鱼一条7 小时前
Redux
react.js·前端框架