时间戳

首页 > 解决方案 > 使用 MaterialUI 和 Typescript 在 React 中传递给 onKeyPressed 函数的事件的正确类型是什么？

reactjs - 使用 MaterialUI 和 Typescript 在 React 中传递给 onKeyPressed 函数的事件的正确类型是什么？

问题描述

在我使用 Typescript 和 MaterialUI 的 React 应用程序中，我有一个 TextField。

我想在按下input时访问 html 元素值。enter

所以我有以下代码

  const keyPress = (e: any) => {
    if (e.key === "Enter") {
      console.log("Do login", e.target.value);
    }
  };

在返回的 React 树的某个地方我有这个

<TextField onKeyPress={keyPress} />

这段代码有效，但我的问题是我不明白如何为e传递给函数的事件定义正确的类型keyPressed。

根据 VSCode intellisense 在我将鼠标悬停在onKeyPress道具上时的建议，我知道我应该使用KeyboardEvent<HTMLDivElement>，但问题是我得到一个错误，上面写着Type 'KeyboardEvent' is not generic.

我做错了什么？

顺便说一句，如果我给事件提供 type ，一切都很好e: { key: string; target: any }，但是当我尝试遵循正确的方式时，理解我做错了什么仍然很有趣。

更新

经过更多研究，似乎传递给keyPressedfunction 的事件是 typeKeyboardEvent并且它的target属性是 type EventTarget。

查看EventTargetin global.d.tsin Reactpackage的定义，我看到它是空接口。

在我的评论中global.d.ts还读到“警告：所有这些接口都是空的。如果您想要各种属性的类型定义（例如 HTMLInputElement.prototype.value），则需要添加--lib DOM（通过命令行或 tsconfig.json）。 ”。但我tsconfig.json实际上包含DOM在库中（属性是"lib": ["dom", "dom.iterable", "esnext"],）。

同样，我可以使事情正常进行，但我想了解如何为该事件获得一个干净的类型。

标签： reactjstypescriptreact-typescriptreact-material

解决方案

您可以为处理程序定义类型，onKeyPress即keyPress：

import { KeyboardEvent, EventHandler } from 'react'

const keyPress: EventHandler<KeyboardEvent<HTMLInputElement>> = (e) => {
  if (e.key === 'Enter') {
    console.log('Do login', (e.target as HTMLInputElement).value)
  }
}

<TextField id="id" label="Name" onKeyPress={keyPress} />

打字稿会给你以下错误......

“EventTarget”类型上不存在属性“值”。

关于此错误的另一篇文章：TypeScript 中的 EventTarget 类型上不存在属性“值”

...当您访问值时 -e.target.value尽管value存在，因此您可以通过HTMLInputElement如上所示强制转换来抑制此错误。

在我看来，您正在尝试访问e.key，而不是e.target.valueinonKeyPress处理程序；因为你最有可能在onChange处理程序中这样做。

相同但可能更短的形式：

type KeyPressType<T = Element> = EventHandler<KeyboardEvent<T>>

const keyPress: KeyPressType<HTMLInputElement> = (e) => {
  if (e.key === 'Enter') {
    console.log('Do login', (e.target as HTMLInputElement).value)
  }
}

问题：是什么类型的e？

答：是KeyboardEvent<HTMLInputElement>

推荐阅读