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

相关推荐
Java后端的Ai之路3 小时前
06-React-Props
前端·react.js·前端框架
雨雨雨雨雨别下啦11 小时前
【OpenHarmony北向开发】ArkTS基础教学
typescript·arkts·openharmonys
ZoeLandia13 小时前
TypeScript 01:类型注解与类型推断
前端·javascript·typescript
ZoeLandia14 小时前
TypeScript 02:interface、type 与类型收窄
前端·typescript
Java后端的Ai之路14 小时前
07React_Props验证器
人工智能·python·react.js·架构·fastapi
Aolith15 小时前
从收藏到错题本,我在 React 全栈项目里实现了一套复习系统
mongodb·react.js·全栈
行者-全栈开发16 小时前
华为云码道 CodeArts 实测:让 AI 用纯 TypeScript 写一个确定性回放的塔防小游戏「熵减特勤局」
typescript·小游戏·canvas·ecs·ai 编程·华为云码道·codearts 代码智能体
一木 之林17 小时前
Agent智能体学习总结:从一次调用到模型自主规划、工具调用与 ReAct 循环的项目实战-6/6
前端·人工智能·学习·react.js
mbshqqb1 天前
TypeScript基础教程之同步生成器
前端·javascript·typescript
song5011 天前
React Native for OpenHarmony 实战:三方库 react-native-parallax-scroll-view 的鸿蒙化适配指南
分布式·react native·react.js·transformer·harmonyos