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

相关推荐
不好听6133 小时前
React 的 useRef vs useState:响应式与非响应式的分界线
前端·react.js
想要成为糕糕手3 小时前
面试必问!React 受控与非受控组件,这篇彻底讲透了
react.js
谷哥的小弟3 小时前
TypeScript接口
javascript·typescript
喜欢睡觉3 小时前
React 受控组件与非受控组件
react.js
触底反弹3 小时前
别再 Prop Drilling 了!一文彻底搞懂 React 组件通信的 5 种方案
前端·javascript·react.js
何时梦醒3 小时前
React 进阶必修:彻底搞懂受控组件与非受控组件
前端·javascript·react.js
lllsure3 小时前
Vue&React Router
前端·vue.js·react.js
sugar__salt4 小时前
深入理解 React useContext:跨层级组件通信的核心利器
前端·javascript·react.js·前端框架·框架
谷哥的小弟4 小时前
TypeScript类型断言
前端·javascript·typescript
用户9385156350717 小时前
React 受控/非受控组件与 React.memo 性能优化——从本质到实战
前端·javascript·react.js