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

相关推荐
Bigger1 小时前
mini-cc 终端 UI:用 React 写 CLI 是什么体验
前端·react.js·ai编程
吹个口哨写代码2 小时前
IIS 部署 Vue/React 单页应用 (SPA) 刷新页面 404/403.18 报错原因及终极解决方案
前端·vue.js·react.js
梦想的颜色10 小时前
TypeScript 完全指南(下):从类型体操到生产级配置
前端·javascript·typescript
喵个咪13 小时前
基于 Taro 的 Headless CMS 多端前端架构:技术解析与二次开发导引
前端·react.js·taro
假如让我当三天老蒯20 小时前
React+TS 项目结构(自学项目用)
前端·react.js
vim怎么退出20 小时前
Dive into React——Fiber架构
react.js·源码阅读
老毛肚1 天前
jeecgboot vue 路由 拆分01
前端·javascript·typescript
光影少年1 天前
react中的Context 为什么会导致性能问题?
前端·javascript·react.js
Z_Wonderful1 天前
react部署更新后旧 chunk 404、用户浏览器缓存旧页面的问题与(路由跳转使用相对路径而不是绝对路径的关系)分析,并提供解决方案
javascript·react.js·缓存