[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了

如果想知道点击的是什么元素 ,打印他的nodename就行了

不过得断言为html元素才行

javascript 复制代码
  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    console.log('current', (e.target as HTMLElement).nodeName);
  };

为什么要断言是html元素?

EventTarget 是所有事件目标(包括 DOM 元素、XMLHttpRequest、WebSocket 等)的基类。并不是所有继承自 EventTarget 的对象都具备 nodeName 属性,nodeName 这个属性是 HTMLElement 类型特有的。因此,只有在 EventTarget 的具体子类是 HTMLElement 或其更具体的子类时,才会有 nodeName 属性。

(XMLHttpRequest, WebSocket)并没有 nodeName属性, 懂了吗

相关推荐
进击的明明11 分钟前
TypeScript速通笔记(下)
前端·面试·typescript
JudithHuang42 分钟前
React 列表与表单
react.js
JudithHuang42 分钟前
React Context 跨层传值
react.js
JudithHuang44 分钟前
React useRef 与 DOM
react.js
JudithHuang1 小时前
React useReducer 复杂状态
react.js
JudithHuang1 小时前
React 组件与 Props
react.js
JudithHuang1 小时前
React:第一个 Vite 应用
react.js