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

相关推荐
yuanlaile37 分钟前
做了 3 年后端才明白:学 NestJS 千万不要只学 API 语法,完整电商项目才是分水岭
typescript·nestjs·node.js 后端·nestjs实战
ZoeLandia1 小时前
TypeScript 07:工程化——import type、声明文件与 tsconfig
开发语言·前端·typescript
一木 之林2 小时前
LangChain 第6章 Agent 智能体核心:create_agent 统一入口与 ReAct 循环
前端·react.js·langchain
nyaomaru3 小时前
如何用 Jev 从 PR 中提取 “Why” 并写入 CHANGELOG?🤔
前端·typescript
damoluomu4 小时前
SSG 的后台怎么补:Node.js 生态里的三条路(番外二)
javascript·css·typescript·node.js·html
苏渡苇6 小时前
从零搭建 Vue 3 工程化项目:Vite + TypeScript + Pinia + Element Plus 实战
前端·vue.js·typescript
霸道流氓气质6 小时前
在线 AI 绘图平台:Flux 模型集成、Serverless 弹性部署与 ComfyUI 工作流的 React + Spring AI 全栈实战
人工智能·react.js·serverless
濮水大叔15 小时前
NestJS Dynamic Providers 与 Cabloy/Vona Provider Scene:同接口多实现的两种装配哲学
typescript·node.js·nestjs
Java后端的Ai之路18 小时前
08_React组件API
前端·react.js·前端框架
const_qiu19 小时前
第一章 1.1-1.2:基础模型调用与 TypeScript 入门 —— Java 开发者的视角
java·javascript·typescript