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

相关推荐
西瓜太郎12347 分钟前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react
掰头战士6 小时前
MCP、Skill、Plugin,都是给agent拓展能力,到底有何区别?
typescript·llm·agent
liangshanbo12158 小时前
React useEffect 与 useLayoutEffect 面试题整理
前端·javascript·react.js
掰头战士9 小时前
聊聊 Function Calling,你的模型是否答非所问?
前端·typescript·agent
dsyyyyy110111 小时前
Typescript装饰器
前端·javascript·typescript
liangshanbo121512 小时前
React useState 函数式更新面试题整理
前端·react.js·前端框架
光影少年14 小时前
react navite process.nextTick 和 Promise.then 的执行顺序
前端·react native·react.js
lewis_lk14 小时前
ReactJs状态迷思:从"常量"到"闭包陷阱"的底层逻辑
前端·react.js
薛一半15 小时前
React路由初始
前端·react.js·前端框架
晓得迷路了15 小时前
栗子前端技术周刊第 146 期 - React 19.3、jQuery 1.0 20 周年、Bun 1.4.2...
前端·javascript·react.js