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

相关推荐
军军君0128 分钟前
数字孪生监控大屏实战模板:云数据中心展示平台
前端·javascript·vue.js·typescript·前端框架·es6·echarts
陈健平2 小时前
AI漫剧工具复刻实战:用 React Flow 搭一个前端的无限画布,复刻 TapNow / LiblibTV 的核心交互
前端·人工智能·react.js
|晴 天|2 小时前
评论系统与情感分析
前端·ai·typescript
烛衔溟3 小时前
TypeScript 函数重载(Overloads)
javascript·ubuntu·typescript
学以智用5 小时前
TypeScript 实战:从环境搭建到项目开发(完整指南)
typescript
Ruihong5 小时前
你的 Vue TransitionGroup 组件,VuReact 会编译成什么样的 React 代码?
vue.js·react.js·面试
M ? A5 小时前
Vue Suspense 组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
Ruihong5 小时前
Vue Suspense 组件在 React 中,VuReact 会如何实现?
vue.js·react.js·面试
糯米团子7496 小时前
react速通-1
javascript·react.js