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

这似乎有效:

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

关键 _(Ha) 在这里,对我来说,是为了说明 React.KeyboardEvent KeyboardEvent .

浏览React代码,我看到的定义如下:

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

但我在复制/粘贴时没有意识到 键盘事件 作为我的处理程序的参数类型,编译器实际上是在提取 键盘事件

类型 onKeyPress 应该是 KeyboardEventHandler<T> ,可以用以下任一方式编写:

handleKeywordKeypress: KeyboardEventHandler<FormControl> = e => {
    // use e.keyCode in here
}

或

import { KeyboardEvent } from "react";
handleKeywordKeypress = (e: KeyboardEvent<FormControl>) => {
    // use e.keyCode in here
};

正如你在回答中指出的那样,如果你选择第二个选项,你需要特别使用 KeyboardEvent 来自React。

keyCode 可直接作为上的属性使用 e ; 您不需要通过 nativeEvent .

此外,泛型类型参数 T FormControl 组件,而不是它的道具,所以您也应该更改其他处理程序。

以上两个答案都没有解决我的问题,应该非常简单明了:

import { KeyboardEvent } from 'react';

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