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

相关推荐
李明卫杭州9 小时前
React 复合事件系统对比解析
前端·javascript·react.js
白雾茫茫丶12 小时前
Vibecoding 一个主题切换动画库:13 种揭幕方式
前端·vue.js·react.js
ynchyong13 小时前
TS 基础
typescript·ts
西瓜太郎49913 小时前
别再手算 Token 成本:用 React 状态机做一个可追溯的模型费用计算器
react.js·typescript
右耳朵猫AI18 小时前
Web前端周刊2026W37 | Shopify 转原生、React 编译 Rust 化、Vitest 5.0、Rslib 1.0
前端·javascript·react.js·typescript·node.js
csj5018 小时前
前端基础之《React(13)—表单绑定、列表渲染》
前端·react.js
csj5019 小时前
前端基础之《React(12)—条件渲染》
前端·react.js
晚安日记wanna1 天前
SSR 为什么不适合登录态从水合冲突到缓存串号
前端·react.js·面试
晚安日记wanna1 天前
TS const 类型参数一道面试题的四层追问
前端·面试·typescript
掰头战士1 天前
你说你折这玩意干什么-agent工作的核心,还真得好好考虑怎么折叠上下文
typescript·llm·agent