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

相关推荐
麦麦大数据6 小时前
M004_基于Langchain+RAG的银行智能客服系统设计与开发
typescript·langchain·flask·vue3·faiss·rag
We་ct9 小时前
LeetCode 173. 二叉搜索树迭代器:BSTIterator类 实现与解析
前端·算法·leetcode·typescript
不会敲代码114 小时前
React组件通信实战:从Todo应用彻底搞懂父子、子父、兄弟通信
前端·react.js
We་ct14 小时前
LeetCode 124. 二叉树中的最大路径和:刷题解析
前端·数据结构·算法·leetcode·typescript
mclwh1 天前
关于React-Konva 报:Text components are not supported....错误的问题
前端·react.js
We་ct2 天前
LeetCode 112. 路径总和:两种解法详解
前端·算法·leetcode·typescript
We་ct2 天前
LeetCode 129. 求根节点到叶节点数字之和:两种解法详解(栈+递归)
前端·算法·leetcode·typescript
程序员林北北2 天前
【前端进阶之旅】Vue3 + Three.js 实战:从零构建交互式 3D 立方体场景
前端·javascript·vue.js·react.js·3d·typescript
不会敲代码12 天前
React组件通信:从零开始掌握Props传递
react.js
哆啦A梦15882 天前
Vue3魔法手册 作者 张天禹 012_路由_(一)
前端·typescript·vue3