如何在同一个事件发射器中处理多种类型 -Typescript

17 浏览
0 Comments

如何在同一个事件发射器中处理多种类型 -Typescript

我正在尝试使用Typescript创建一个函数，该函数检查\"Enter\"键的按下事件，然后如果event.target.value的长度大于0，则跳转到具有该值的页面。由于这是在一个Next.js应用程序中，因此有一个router.push行。代码大致如下：\n

const goToSearch = (e: React.KeyboardEvent | React.ChangeEvent) => {
  if (e.key === "Enter") {
    e.preventDefault();
    if (e.target.value.length > 0) {
      router.push(
        { pathname: "/Search", query: { searchVal: e.target.value } },
        "/Search"
      );
    }
  }
};

\n为了触发这个函数，我在输入元素中使用了onKeyDown属性，如下所示：\n

\n这里的挑战是，由于我使用了Typescript，e的类型可以是Keyboard事件或Change事件。如果我使用|提供两种类型，我会得到错误，因为Typescript不知道引用哪种事件类型。有没有办法我可以创建一个接口或一些自定义类型，同时利用这两种事件类型（键盘事件与更改事件）？这个接口或自定义类型还需要考虑preventDefault空函数。\n谢谢。

0

1 答案

0 Comments

问题的原因是在同一个事件发射器中处理多种类型的事件。解决方法是使用类型守卫来断言事件是联合类型中的特定事件之一，然后再尝试访问联合类型中两种类型都不存在的属性。

代码示例为：

const goToSearch = (e: React.KeyboardEvent<HTMLInputElement> | 
React.ChangeEvent<HTMLInputElement>) => {
  const {key} = (e as React.KeyboardEvent<HTMLInputElement>)
  const {target} = (e as React.ChangeEvent<HTMLInputElement>)
  if (key === "Enter") {
    e.preventDefault();
  }
  if (target.value.length > 0) {
    // change route
  }
};

另一种写法是：

const goToSearch = (e: React.KeyboardEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>) => {
  if ((e as React.KeyboardEvent<HTMLInputElement>) && (e as React.KeyboardEvent<HTMLInputElement>).key === "Enter") {
    e.preventDefault();
  }
  if ((e as React.ChangeEvent<HTMLInputElement>) && (e as React.ChangeEvent<HTMLInputElement>).target.value.length > 0) {
    // change route
  }
};

解决方法的思路是通过将事件对象解构为具有特定类型的变量，并在参数中明确指定它们的类型，从而避免类型混淆。

作者在回答问题之前阅读了相关讨论。

0