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

相关推荐
mclwh4 小时前
关于React-Konva 报:Text components are not supported....错误的问题
前端·react.js
We་ct11 小时前
LeetCode 112. 路径总和:两种解法详解
前端·算法·leetcode·typescript
We་ct11 小时前
LeetCode 129. 求根节点到叶节点数字之和:两种解法详解(栈+递归)
前端·算法·leetcode·typescript
程序员林北北12 小时前
【前端进阶之旅】Vue3 + Three.js 实战:从零构建交互式 3D 立方体场景
前端·javascript·vue.js·react.js·3d·typescript
不会敲代码11 天前
React组件通信:从零开始掌握Props传递
react.js
哆啦A梦15881 天前
Vue3魔法手册 作者 张天禹 012_路由_(一)
前端·typescript·vue3
卸任1 天前
Electron判断是内置摄像头还是接摄像头
前端·react.js·electron
Lao乾妈官方认证唯一女友:D1 天前
wagmi使用方法
react.js·web3·wagmi
薛一半1 天前
React三大属性之refs
前端·javascript·react.js
程序员林北北1 天前
【前端进阶之旅】Svelte:编译即框架,让前端开发回归简洁
前端·javascript·vue.js·react.js·html5