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

相关推荐
化作繁星6 小时前
如何在 React 中测试高阶组件?
前端·javascript·react.js
初遇你时动了情6 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss
Au_ust6 小时前
千峰React:函数组件使用(2)
前端·javascript·react.js
来一碗刘肉面7 小时前
React - ajax 配置代理
前端·react.js·ajax
界面开发小八哥9 小时前
可视化工具SciChart如何结合Deepseek快速创建一个React仪表板?
react.js·信息可视化·数据可视化·原生应用·scichart
Java知识技术分享12 小时前
使用LangChain构建第一个ReAct Agent
python·react.js·ai·语言模型·langchain
谢尔登14 小时前
【React】React 性能优化
前端·react.js·性能优化
来一碗刘肉面14 小时前
TypeScript - 属性修饰符
前端·javascript·typescript
Rowrey18 小时前
react+typescript,初始化与项目配置
javascript·react.js·typescript
谢尔登18 小时前
Vue 和 React 的异同点
前端·vue.js·react.js