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

相关推荐
一只大侠的侠13 小时前
React Native for OpenHarmony:日期范围选择器实现
javascript·react native·react.js
一只大侠的侠14 小时前
React Native for OpenHarmony:DatePicker 日期选择器组件详解
javascript·react native·react.js
x-cmd15 小时前
[x-cmd] Node.js 的关键一步:原生运行 TypeScript 正式进入 Stable
javascript·typescript·node.js·x-cmd
一只大侠的侠17 小时前
React Native实战:高性能Popover弹出框组件
javascript·react native·react.js
一只大侠的侠17 小时前
React Native for OpenHarmony:Calendar 日程标记与事件管理实现方案
javascript·react native·react.js
拾荒李17 小时前
在 Vue 项目里“无痛”使用 React 组件:以 Veaury + Vite 为例
前端·vue.js·react.js
一只大侠的侠18 小时前
React Native实战:高性能Overlay遮罩层组件封装与OpenHarmony适配
javascript·react native·react.js
UIUV19 小时前
构建Git AI提交助手:从零到全栈实现的学习笔记
前端·后端·typescript
不会敲代码119 小时前
从零开始学 React Hooks:useState 与 useEffect 核心解析
react.js
一只大侠的侠19 小时前
React Native for OpenHarmony:Calendar 日历组件实现指南
javascript·react native·react.js