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

相关推荐
光影少年6 小时前
react navite 跨端核心原理
前端·react native·react.js
用户2986985301410 小时前
在 React 中使用 JavaScript 合并 Excel 文件
前端·javascript·react.js
CaffeinePro1 天前
告别知识点零散!React零基础通关,从环境搭建到Ant Design页面实战
前端·react.js
ch_09181 天前
从0构建SDK第3节:实现 ReActAgent 的推理与行动循环
typescript·llm·agent
疯狂的魔鬼1 天前
一套 Schema 驱动四视图:记 useCrudSchemas 的设计与实践
前端·javascript·typescript
Ruihong2 天前
Vue withDefaults 转 React:VuReact 怎么处理?
vue.js·react.js·面试
用户298698530142 天前
在 React 中使用 JavaScript 将 Excel 转换为 SVG
前端·javascript·react.js
小林攻城狮3 天前
使用 Transport 节流解决 Vercel AI SDK 流式渲染卡死问题
前端·react.js