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

相关推荐
openKaka_5 小时前
reconcileChildren 深入:React 如何根据 ReactElement 构建子 Fiber
前端·javascript·react.js
Highcharts.js6 小时前
Highcharts React v5升级三问|最大的升级方向是什么?需要注意什么?有什么优化?
前端·javascript·react.js·前端框架·highcharts·大数据渲染·前端性能
VillenK7 小时前
版本依赖问题:vite-plugin-dts@3.1.0 与 jiti 的兼容性
前端·typescript·vite
轻口味9 小时前
AI 时代全栈开发破局:TypeScript 生态实战,从入门到部署一站式通关
前端·mongodb·docker·ai·typescript·react·next.js
Czzzzlq11 小时前
【无标题】
typescript·node.js·ai编程
@不误正业11 小时前
多Agent协作框架深度实战-从ReAct到Plan-and-Execute全架构演进
前端·react.js·架构·agent
mobº13 小时前
Vue3 +TypeScript 项目总结
前端·javascript·typescript
kyriewen1 天前
老板逼我上AI,我偷偷在浏览器里跑LLaMA,省下20万API费
前端·react.js·llm
漂流瓶jz1 天前
从TailwindCSS到UnoCSS:原子化CSS框架接入、特性与配置
前端·css·react.js
@大迁世界1 天前
45.什么是内联条件表达式(inline conditional expressions)?在事件处理里怎么用?
开发语言·前端·javascript·react.js·ecmascript