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

相关推荐
浩星7 小时前
electron系列2:搭建专业Electron开发环境
javascript·typescript·electron
AlkaidSTART9 小时前
TanStack Query 技术指南:异步状态管理核心实践
前端·react.js
ZHENGZJM10 小时前
JWT 鉴权体系:令牌生成与解析
react.js·go
我命由我1234510 小时前
React - 组件优化、children props 与 render props、错误边界
前端·javascript·react.js·前端框架·html·ecmascript·js
Z_Wonderful11 小时前
React react-app-env.d.ts是 TypeScript 的全局类型声明文件,它的作用
前端·react.js·typescript
cat10month11 小时前
react坑点记录
前端·javascript·react.js
kgduu11 小时前
react源码学习之reconcile
前端·学习·react.js
whuhewei11 小时前
React Fiber架构
前端·react.js·架构
英俊潇洒美少年11 小时前
通用构建优化(编译阶段)+ Vue 专属运行时优化 + React 专属运行时优化
前端·vue.js·react.js
英俊潇洒美少年11 小时前
Vue 和 React 的核心渲染机制 对比
前端·vue.js·react.js