在 React 中键入检查事件 onKeyPress 的正确方法是啥？

Posted 2023-02-22

【中文标题】在 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 现在是一个有效的属性。

是的，这完全超出了我的想象。你说得对。然后删除评论

【参考方案1】：

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

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