[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了

如果想知道点击的是什么元素 ,打印他的nodename就行了

不过得断言为html元素才行

javascript 复制代码
  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    console.log('current', (e.target as HTMLElement).nodeName);
  };

为什么要断言是html元素?

EventTarget 是所有事件目标(包括 DOM 元素、XMLHttpRequest、WebSocket 等)的基类。并不是所有继承自 EventTarget 的对象都具备 nodeName 属性,nodeName 这个属性是 HTMLElement 类型特有的。因此,只有在 EventTarget 的具体子类是 HTMLElement 或其更具体的子类时,才会有 nodeName 属性。

(XMLHttpRequest, WebSocket)并没有 nodeName属性, 懂了吗

相关推荐
ZoeLandia7 小时前
React6:组件通信
前端·react.js·typescript
孟陬10 小时前
解决动态 import 类型 Any 痼癖
typescript·node.js·bun
ZoeLandia11 小时前
React03:useState 与不可变更新
前端·react.js·typescript·react
鬼手点金11 小时前
单轮对话:最简单的 API 调用
java·服务器·前端·javascript·react.js·servlet·tomcat
console.log('npc')15 小时前
从0到1实现任务评价统计功能:React + TypeScript 实战指南(小白注释版)
前端·react.js·typescript
ZoeLandia15 小时前
React04:事件处理与受控表单
开发语言·前端·react.js·typescript
ZoeLandia16 小时前
React05:useEffect 与副作用
开发语言·前端·react.js·typescript
濮水大叔1 天前
函数式与对象式:前端架构的两种成本曲线
vue.js·react.js·函数式编程
Flynt1 天前
Cloudflare 用 Rust 重写了 TypeScript:我拿同一批代码跑了跑,报错一模一样,退出码不一样
rust·typescript·前端工程化
落花看风雪1 天前
从零开始搭建后台系统(vue3+TypeScript+Vite)01
typescript·vue·js