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

相关推荐
kyriewen9 小时前
别再这样写TypeScript了——Code Review中最常见的8个反模式
前端·javascript·typescript
张元清13 小时前
React useDisclosure Hook:管理模态框和抽屉的打开关闭状态 (2026)
javascript·react.js
学高数就犯困13 小时前
React:常见的性能优化手段
前端·react.js
濮水大叔13 小时前
为什么 AI 最擅长 React/Next.js,却很少看到真正好用的 Next.js 开源项目?
react.js·node.js·next.js
Cloud_bread16 小时前
从ReAct到自主闭环:Agentic Coding核心执行引擎的技术演进
前端·react.js·前端框架
A242073493017 小时前
Vue 3 + TypeScript:核心优势与开发注意事项详解
vue.js·ubuntu·typescript
用户09340777351419 小时前
HarmonyOS WPS Open SDK 实践:enableEdit 怎么映射预览与编辑
typescript
Darling噜啦啦19 小时前
React 组件进化论:从状态混乱到 UI = fn(props) 的三次重构
react.js
鱼饼Y19 小时前
AI时代,使用大模型学习LangChain (4)——LangGraph
typescript·langchain
无人生还19 小时前
从 Vue3 到 React · 快速上手系列第 10 篇:路由
前端·vue.js·react.js