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

相关推荐
Revolution618 小时前
React 组件重新渲染时,到底重新执行了什么
前端·react.js·面试
林焱_RPAAI8 小时前
影刀RPA技术深度:CSS选择器高级实战指南——伪类属性选择器与性能对比完全解析
vue.js·react.js
贩卖黄昏的熊12 小时前
NestJS简明教程——安全
开发语言·javascript·安全·typescript·nest.js
theoweb312 小时前
Typescript关于sort需要注意的地方
typescript
黄泉路醉s14 小时前
在Vant+Vue+TypeScript的H移动前端使用UnoCSS
前端·vue.js·typescript
名字还没想好☜15 小时前
React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复
前端·javascript·react.js·bug·react·next.js
10share16 小时前
React 新一代样式隔离方案 —— 编译时、零运行时、原生写法
前端·react.js
不好听61316 小时前
TypeScript 类型系统:`type` vs `interface` 与 `import type`
typescript
光影少年16 小时前
RN 的EventEmitter 双向通信
前端·react native·react.js
晓说前端1 天前
TypeScript 高级特性 —— 类型断言与泛型
前端·typescript