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

相关推荐
千寻girling4 小时前
计算机组成原理-全通关源码-实验(通关版)---头歌平台
前端·面试·职场和发展·typescript·node.js
我是刘成5 小时前
基于React Native 0.83.1 新架构下的拆包方案
react native·react.js·架构·拆包
梦6506 小时前
Vue 组件 vs React 组件深度对比
javascript·vue.js·react.js
全栈前端老曹8 小时前
【ReactNative】页面跳转与参数传递 - navigate、push 方法详解
前端·javascript·react native·react.js·页面跳转·移动端开发·页面导航
_Kayo_9 小时前
React上绑定全局方法
前端·javascript·react.js
yanghuashuiyue12 小时前
Vue3难以统一的命名规范
前端·vue.js·typescript
梦65014 小时前
React + FullCalendar 实现高性能跨天事件日历组件
前端·react.js·前端框架
C_心欲无痕14 小时前
react - 组件之间的通信
前端·javascript·react.js
想学后端的前端工程师15 小时前
【React Hooks深度实战指南:从原理到最佳实践】
前端·react.js·前端框架
San30.17 小时前
从面向对象 CSS 到原子化架构:Tailwind CSS 与 React 性能优化实践
css·react.js·架构