遇到 React 事件对象如何用TypeScript定义

在React组件开发过程中,频繁地在DOM元素上绑定合成事件是一种常见的实践。例如,在div元素上添加onClick事件处理器,或者在input元素上添加onChange事件处理器,都是为了响应用户的交互行为。这些合成事件处理器接收一个特别的React事件对象,该对象提供了事件的详细信息,使得开发者能够根据事件的具体情况执行相应的逻辑。

然而,在使用TypeScript进行React开发时,正确地定义这个事件对象的类型可能会遇到一些挑战。很多开发者可能会选择使用any类型来定义事件对象,以避免类型错误。但这种做法牺牲了TypeScript提供的类型安全性,可能会隐藏潜在的错误,如下列代码所示:

tsx 复制代码
import React from 'react';
import type { FC } from 'react';

const MyComponent: FC = () => {
  const handleClick = (event: any) => {
    console.log('Button clicked!');
    console.log('Event type:', event.type);
    console.log('Target element:', event.target);
  };

  return (
    <button onClick={handleClick}>Click me!</button>
  );
};

export default MyComponent;

幸运的是,@types/react包提供了一套丰富的DOM事件泛型类型,它们能够帮助我们更精确地定义事件对象的类型。这不仅能够提高代码的类型安全性,还能够让我们更加自信地访问事件对象中的属性和方法。以下是一些常用的 DOM 事件泛型类型列表及其描述:

事件类型 描述
AnimationEvent CSS动画。
ChangeEvent 改变<input><select><textarea>元素的值。
ClipboardEvent 使用复制、粘贴和剪切事件。
CompositionEvent 由于用户间接输入文本而发生的事件(例如,根据浏览器和PC设置,如果您想在美国键盘上输入日文,可能会出现一个带有附加字符的弹出窗口)。
DragEvent 使用指针设备(例如,鼠标)进行拖放交互。
FocusEvent 元素获得或失去焦点时发生的事件。
FormEvent 每当表单或表单元素获得/失去焦点、表单元素值更改或表单提交时发生的事件。
InvalidEvent 当输入的有效性限制失败时触发(例如<input type="number" max="10">,有人插入数字20)。
KeyboardEvent 用户与键盘的交互。每个事件描述单个键的交互。
MouseEvent 由于用户与指针设备(例如,鼠标)的交互而发生的事件。
PointerEvent 由于用户与多种指针设备(如鼠标、笔/触控笔、触摸屏)的交互而发生的事件,它还支持多点触控。除非您为较旧的浏览器(IE10或Safari 12)开发,否则建议使用指针事件。扩展UIEvent
TouchEvent 由于用户与触摸设备的交互而发生的事件。扩展UIEvent。
TransitionEvent CSS过渡。浏览器支持不完全。扩展UIEvent。
UIEvent 鼠标、触摸和指针事件的基本事件。
WheelEvent 在鼠标滚轮或类似输入设备上滚动。(注意:wheel事件不应与scroll事件混淆)
SyntheticEvent 所有上述事件的基本事件。在不确定事件类型时应使用。

在上述代码中,由于用户的操作是点击按钮,因此应当使用 MouseEvent 类型。而且,因为事件的目标是一个 button 元素,所以 MouseEvent 泛型应当具体化为 HTMLButtonElement,也就是其泛型变量应该是 HTMLButtonElementHTMLButtonElement 是 TypeScript 中一个内置 HTML 元素接口。

以下是一些常用的 HTML 元素接口列表及其描述:

HTML 元素接口 描述
HTMLInputElement 代表 <input> 元素,包含特定的属性,如 valuecheckedtype 等。
HTMLSelectElement 代表 <select> 元素,包含 optionslengthselectedIndex 等属性。
HTMLAnchorElement 代表 <a>(锚)元素,包括 hreftargetdownload 等属性。
HTMLTextAreaElement 代表 <textarea> 元素,提供 rowscolsvalue 等属性。
HTMLDivElement 代表 <textarea> 元素,提供 rowscolsvalue 等属性。
HTMLImageElement 代表 <img> 元素,包含 srcaltwidthheight 等属性。
diff 复制代码
import React from 'react';

const MyComponent: React.FC = () => {
- const handleClick = (event: any) => {
+ const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log('Button clicked!');
    console.log('Event type:', event.type);
    console.log('Target element:', event.currentTarget); // 使用currentTarget而不是target,以确保类型的正确性
  };

  return (
    <button onClick={handleClick}>Click me!</button>
  );
};

export default MyComponent;

在上述代码示例中,我们使用了React.MouseEvent<HTMLButtonElement>来定义handleClick函数的event参数。这表明我们期望这个事件是一个鼠标事件,且事件的目标是一个HTML按钮元素。这种明确的类型定义使得我们能够安全地访问event.currentTarget中的属性,例如typecurrentTarget,而无需担心类型错误。

相关推荐
C2X13 分钟前
Vue3.0 学习总结
前端
汤姆Tom15 分钟前
CSS 新特性与未来趋势
前端·css·面试
尘世中一位迷途小书童15 分钟前
🚀 pnpm + Monorepo 实战指南:现代前端项目管理的最佳实践
前端·架构
杨超越luckly29 分钟前
HTML应用指南:利用GET请求获取全国中国建设银行网点位置信息
前端·arcgis·html·数据可视化·门店数据
王翼鹏31 分钟前
html 全角空格和半角空格
前端·html
敲代码的嘎仔32 分钟前
JavaWeb零基础学习Day2——JS & Vue
java·开发语言·前端·javascript·数据结构·学习·算法
CsharpDev-奶豆哥35 分钟前
jq获取html字符串中的图片逐个修改并覆盖原html的解决方案
前端·html
Keepreal4961 小时前
pdf文件预览实现
javascript·react.js
IT_陈寒1 小时前
Python性能优化:用这5个鲜为人知的内置函数让你的代码提速50%
前端·人工智能·后端
简小瑞1 小时前
VSCode源码解密:一行代码解决内存泄漏难题
前端·设计模式·visual studio code