Typescript/React onKeyPress 的正确参数类型是什么？

Question

打字稿 2.3.4、反应 15.5.4 和反应引导 0.31.0。

我有一个 FormControl 当用户按下回车键时我想做一些事情。

控制：

 <FormControl
  name="keyword"
  type="text"
  value={this.state.keyword}
  onKeyPress={this.handleKeywordKeypress}
  onChange={(event: FormEvent<FormControlProps>) =>{
    this.setState({
      keyword: event.currentTarget.value as string
    });
  }}
/>

handleKeywordKeypress 的参数定义应该是什么？

我可以这样定义：

 handleKeywordKeypress= (e: any) =>{
  log.debug("keypress: " + e.nativeEvent.code);
};

这将被调用，它将打印 keypress: Enter 但 e 的类型应该是什么，以便我可以将值与（什么？）进行比较，以判断是否按下了 Enter。

原文由 Shorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这似乎有效：

 handleKeywordKeyPress = (e: React.KeyboardEvent<FormControl>) =>{
  if( e.key == 'Enter' ){
    if( this.isFormValid() ){
      this.handleCreateClicked();
    }
  }
};

对我来说，这里的关键（哈哈）是指定 React.KeyboardEvent ，而不是 KeyboardEvent 。

浏览 React 代码，我看到了如下定义：

 type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>;

但是没有意识到，当我复制/粘贴 KeyboardEvent 作为我的处理程序的参数类型时，编译器实际上正在选择 KeyboardEvent 这是在某处的 Typescript 库（而不是 React 定义）。

原文由 Shorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以上两个答案都没有解决我的问题，应该很简单明了：

 import { KeyboardEvent } from 'react';

const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
   // do stuff
};

原文由 underfrankenwood 发布，翻译遵循 CC BY-SA 4.0 许可协议