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

相关推荐
穗余28 分钟前
Typescript let和var区别
前端·javascript·typescript
会编程的土豆1 小时前
从零理解 AI Agent:概念、ReAct、Prompt 五要素与面试要点
人工智能·react.js·prompt
苏灿烤鱼2 小时前
AI总改崩你的代码?4.6万星GitNexus架构深拆
typescript·开源·agent
zzzzzz3103 小时前
react-bits:把酷炫动效从“灵感截图”变成可复用的 React 组件
javascript·react.js·动效
软件开发技术深度爱好者16 小时前
在线学习实践 TypeScript 的官方Playground(演练场)使用介绍
javascript·学习·typescript
YHHLAI1 天前
React + TypeScript 实战:从零构建颜色选择器应用
前端·react.js·typescript
光影少年1 天前
react navite调试方案:Flipper、远程调试
前端·javascript·react native·react.js·前端框架
YHHLAI1 天前
[特殊字符] 从 JSX 到 TypeScript:React 开发的进化之路
javascript·react.js·typescript
zzzzzz3101 天前
36K stars 之外:如何阅读 react-bits 这样的动画交互式 React 项目
javascript·react.js·动效