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

相关推荐
mCell6 小时前
DeepSeek Harness 速览:“一切皆插件”意味着什么
typescript·agent·deepseek
京东云开发者13 小时前
【全栈实践】第一个 AI Agent 项目:从零搭建 AI 音频创作助手(入门篇)
typescript·agent·vuex
用户69190268133913 小时前
用浏览器 WebGPU跑DPSK大模型(1) - 模型的下载和前端下载进度的显示
javascript·react.js·架构
光影少年13 小时前
react navite本地存储:AsyncStorage、MMKV、文件存储
前端·react native·react.js
JieE21216 小时前
前端不等人:用 Mock 接口工程让 React 应用独立起飞
前端·react.js·面试
王林不想说话16 小时前
React + Ant Design 后台项目:63 个业务组件的分层实践
react.js·typescript·ant design
大家的林语冰18 小时前
👍 超越 ESLint,Oxc 优先采用 TypeScript 7,Rust 和 Go 梦幻联动!
前端·javascript·typescript
不好听61319 小时前
React 记忆化三兄弟:memo、useMemo、useCallback 到底在缓存什么
react.js
想要成为糕糕手19 小时前
🚀 在浏览器里跑 DeepSeek-R1?WebGPU 端侧推理实战(五)—— 中断、重置、缓存与流式生成
前端·react.js·llm
embedded大铭20 小时前
ai时代上站记录
typescript