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

相关推荐
光影少年8 小时前
原生DOM操作在React 中的注意事项
前端·javascript·react.js
糖拌西瓜皮8 小时前
Node.js工程化实践:包管理、TypeScript配置与代码质量
typescript·node.js
YAwu111 天前
深入解析 React 炫彩鼠标跟随标题组件:从坐标定位到动画性能
前端·react.js
Ruihong2 天前
🎉 VuReact 1.9.0 发布,支持 Vue 3.4 defineModel 编译到 React
vue.js·react.js·面试
spmcor2 天前
React 架构师之路:Next.js 全栈革命(第八篇)
前端·react.js
假如让我当三天老蒯2 天前
React基础、进阶(学习用)
前端·react.js·面试
spmcor2 天前
为什么页面越用越卡?——React组件内存泄漏的排查与修复
react.js
天蓝色的鱼鱼2 天前
React Router v8 来了:react-router-dom 没了,老项目该怎么迁移?
前端·react.js
Bolt2 天前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
无名氏同学3 天前
React 16-19 新特性
react.js