使用 React 和 TypeScript 为输入元素创建一个键处理程序 [重复]

Posted 2023-02-22

【中文标题】使用 React 和 TypeScript 为输入元素创建一个键处理程序 [重复]

【英文标题】：Create a key handler for input element with React and TypeScript [duplicate]

【发布时间】：2021-08-09 21:14:26

【问题描述】：

这应该非常简单，但显然不是。 在标准 html input 元素中，如果Enter 被击中，我想执行和操作。 我正在努力学习 TS，但无法弄清楚哪种类型适合我需要的一切。

<input type="text" onChange=handleInput />

const handleInput = (event: any) => 
  if (event.key === 'Enter') 
    console.log(event.target.value);
  ;
;

如果event: InputEvent那么我什至不能调用函数，因为事件类型完全不兼容。 如果event: ChangeEvent<HTMLInputEvent> 那么我可以到达event.target.value，但是错误提示没有key 属性，这是正确的。在这种情况下，击键值保持在event.nativeEvent.data 之下。但是，如果我选择 if (event.nativeEvent.data...)，则会出现错误提示没有 data 属性，即使显然存在：

// from the console
nativeEvent: InputEvent isTrusted: true, data: "d"...)

如果 event: KeyboardEvent 然后我得到 event.key 但现在 event.target.value 不存在。

我很想知道两件事：

此事件的正确类型是什么？ 我在哪里可以了解这些细微差异的无穷无尽的类型？

【问题讨论】：

event.nativeEvenet 不起作用，拼写在编程中很重要，这就是为什么访问它的 .data 属性会引发 TS 错误 - 它的拼写是 nativeEvent

澄清一下，我使用的是 IDE，所以很明显任何错别字都是我在这里输入的。

以下线程的第二个答案解决了您的情况：to call onChange event after pressing Enter key

【参考方案1】：

要监听按下的键，您需要onKeyDown，而不是onChange。

const handleEnter = (event: React.KeyboardEvent<HTMLInputElement>) => 
    if (event.key === "Enter")  ... 


<input onKeyDown=handleEnter ... />

【讨论】：

在尝试此操作时，event.target.value 的错误提示为 Property 'value' does not exist on type 'EventTarget'.。

@RonnyEfronny 你必须保留这两个事件，onChange 更新一些本地状态，onKeyDown 将使用该状态，而不是（无效）event.target.value。

经过一番摆弄，我发现如果我在这个解决方案中将target 更改为currentTarget，我可以访问value。如果您将其添加到答案中，我可以标记它。