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

相关推荐
光影少年2 小时前
RN 原生动画 Animated 用法、动画性能优化
react native·react.js·掘金·金石计划
YFF菲菲兔18 小时前
React 不冒泡的移入 / 移出事件插件
react.js
YFF菲菲兔18 小时前
React 表单控件 onChange 事件插件
react.js
濮水大叔20 小时前
Hooks 之后,为什么前端仍需要“包裹”能力?
vue.js·react.js·前端框架
小粉粉hhh20 小时前
React(三)——Redux
前端·javascript·react.js
YFF菲菲兔20 小时前
React 基础事件插件
react.js
qq_529599381 天前
react js循环滚动
前端·javascript·react.js
濮水大叔1 天前
在 DTO 中使用 Form Layout 配置复杂表单,支持 Tabs/Groups/Sections
vue.js·typescript·node.js
索西引擎1 天前
【React】严格模式:开发阶段质量保障的静态分析机制
前端·react.js·前端框架
小程故事多_802 天前
拆解SOP+ReAct对话Agent,告别硬编码,解锁智能对话的柔性迭代能力
前端·人工智能·react.js·前端框架