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

相关推荐
老王以为25 分钟前
从源码到架构:React useActionState 深度剖析
前端·javascript·react.js
萧曵 丶1 小时前
Vue3组件通信全方案
前端·javascript·vue.js·typescript·vue3
漫游的渔夫1 小时前
前端开发者做 Agent:模型说执行就执行?先加 3 道闸门再碰真实业务
前端·人工智能·typescript
天蓝色的鱼鱼2 小时前
当AI开始替我写代码,我还要纠结选Vue还是React吗?
vue.js·react.js·ai编程
空中海17 小时前
01 React Native 基础、核心组件与布局体系
javascript·react native·react.js
空中海18 小时前
05 React架构设计、项目实践与专家清单
前端·react.js·前端框架
前端之虎陈随易20 小时前
2年没用Nodejs了,Bun很香
linux·前端·javascript·vue.js·typescript
空中海20 小时前
04 工程化、质量体系与 React 生态
前端·ubuntu·react.js
Yue16820 小时前
啥子都能看懂的TypeScript快速入门
typescript
空中海20 小时前
03 性能、动画与 React Native 新架构
react native·react.js·架构