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

相关推荐
嚴寒3 小时前
前端配环境配到崩溃?这个一键脚手架让我少掉了一把头发
前端·react.js·架构
Wect4 小时前
LeetCode 17. 电话号码的字母组合:回溯算法入门实战
前端·算法·typescript
古茗前端团队6 小时前
嗯…微信小程序主包又双叒叕不够用了!!!
react.js
IT星宿20 小时前
开发一个 TypeScript 语言服务插件:让 RTK Query 的"跳转到定义"更智能
typescript·redux
寅时码1 天前
React 正在演变为一场不可逆的赛博瘟疫:AI 投毒、编译器迷信与装死的官方
前端·react.js·设计模式
学高数就犯困1 天前
React:一个例子讲清楚 useEffect 和 useReducer
react.js
Wect1 天前
JSX & ReactElement 核心解析
前端·react.js·面试
不会敲代码12 天前
Zustand:轻量级状态管理,从入门到实践
前端·typescript
codingWhat2 天前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js
程序员ys2 天前
前端权限控制设计
前端·vue.js·react.js