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

相关推荐
JiaWen技术圈37 分钟前
React 19 并发渲染器:全面解析与实战指南
前端·react.js·前端框架
Shiy_2 小时前
用 TypeScript 验证三门问题:为什么换门胜率是 2/3?
算法·typescript
Ruihong2 小时前
VuReact v1.8.4 发布:Vue 迁移 React 编译器迎来稳定性大修,这些坑终于被填平了
前端·vue.js·react.js
从文处安2 小时前
「React Router v7 教程」从零到全栈,一篇搞定
前端·react.js
卸任3 小时前
打造基于 Milkdown 的所见即所得 Markdown 编辑器
前端·react.js·markdown
JiaWen技术圈3 小时前
React 19 Fiber 架构 深度解析
前端·react.js·架构
暗冰ཏོ3 小时前
《Vue + React + Java + PHP 项目部署到服务器完整指南》
java·服务器·vue.js·react.js·项目部署
JeariCk3 小时前
React Compiler 1.0 发布半年后的现状
react.js
kkoral3 小时前
Vue3 图片标框功能实现方案
前端·vue.js·vscode·typescript
. . . . .4 小时前
React Native
react native·react.js