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

相关推荐
YFF菲菲兔17 小时前
调度系统和调和系统的桥梁
react.js
YFF菲菲兔21 小时前
commitRoot 源码解析
react.js
光影少年2 天前
react批量更新、同步/异步更新场景
前端·react.js·掘金·金石计划
YFF菲菲兔2 天前
completeRoot 源码解析
react.js
光影少年3 天前
React 合成事件机制、和原生事件区别、事件冒泡阻止
前端·react.js·掘金·金石计划
Momo__3 天前
TypeScript NoInfer<T>——精准控制泛型推断的工具类型
前端·typescript
YFF菲菲兔3 天前
finishConcurrentRender 源码解析
react.js
YFF菲菲兔3 天前
reconcileChildren 源码解析
react.js
还有多久拿退休金4 天前
Ant Design Tree 搜索定位避坑指南:虚拟滚动下如何实现高亮与精准定位
前端·react.js
光影少年4 天前
react 原理与进阶
前端·react.js·掘金·金石计划