在 React 中键入检查事件 onKeyPress 的正确方法是什么？答案

【问题标题】：What is the right way to type check an event onKeyPress in React?在 React 中键入检查事件 onKeyPress 的正确方法是什么？
【发布时间】：2020-03-09 09:48:42
【问题描述】：

以下代码：

  <input
    type="text"
    onKeyPress={(e) => addTag(e)}
  />

  const addTag = (e: React.SyntheticEvent<HTMLInputElement>): void => {
    if (e.key === 'Enter')) {
      // Do something with `e.currentTarget.value`
    }
  };

这会导致这个错误：

Property 'key' does not exist on type 'SyntheticEvent<HTMLInputElement, Event>'.

我应该如何在这里输入事件？无论我使用什么，都必须与e.currentTarget.value 一起使用。

【问题讨论】：

见here
@Dupocas 实际上 React 在最近的版本中将键码规范化为字符串，因此 key 现在是一个有效的属性。
是的，这完全超出了我的想象。你说得对。然后删除评论

标签： reactjs typescript

【解决方案1】：

onKeyPress React 输入的事件有这种类型： (event: React.KeyboardEvent<HTMLInputElement>) => void

类型定义：https://github.com/facebook/react/blob/4cb399a433771c84e861d5ca3d38a24733d23ad8/packages/react-interactions/events/src/dom/Keyboard.js#L36

【讨论】：