typescript 打字稿/反应 onKeyPress 参数的正确类型是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46462841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typescript/React what's the correct type of the parameter for onKeyPress?
提问by Shorn
Typescript 2.3.4, react 15.5.4 and react-bootstrap 0.31.0.
打字稿 2.3.4，反应 15.5.4 和反应引导 0.31.0。
I have a FormControland I want to do something when the user presses enter.
我有一个FormControl，我想在用户按下回车键时做一些事情。
The control:
控制：
<FormControl
name="keyword"
type="text"
value={this.state.keyword}
onKeyPress={this.handleKeywordKeypress}
onChange={(event: FormEvent<FormControlProps>) =>{
this.setState({
keyword: event.currentTarget.value as string
});
}}
/>
What should the definition of the parameter for handleKeywordKeypressbe?
参数的定义应该handleKeywordKeypress是什么？
I can define it like this:
我可以这样定义：
handleKeywordKeypress= (e: any) =>{
log.debug("keypress: " + e.nativeEvent.code);
};
That will be called, and it will print kepress: Enterbut what should the type of ebe so that I can compare the value against (what?) to tell if Enter was pressed.
这将被调用，它会打印kepress: Enter但类型应该是什么，e以便我可以将值与（什么？）进行比较以判断是否按下了 Enter 键。
采纳答案by Shorn
This seems to work:
这似乎有效：
handleKeywordKeyPress = (e: React.KeyboardEvent<FormControl>) =>{
if( e.key == 'Enter' ){
if( this.isFormValid() ){
this.handleCreateClicked();
}
}
};
The key (HaHa.) here, for me, was to specify React.KeyboardEvent, rather than KeyboardEvent.
对我来说，这里的关键（哈哈。）是指定React.KeyboardEvent，而不是KeyboardEvent。
Trolling around the React code, I was seeing definitions like:
浏览 React 代码，我看到如下定义：
type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>;
But didn't realise that when I was specifying KeyboardEventas the parameter type for my handler, I was actually picking up the KeyboardEventspecified in the Typescript libraries somewhere (rather than the React definition).
但是没有意识到当我KeyboardEvent为处理程序指定参数类型时，我实际上是KeyboardEvent在某个地方（而不是 React 定义）中选择了 Typescript 库中的指定类型。
回答by Tom Fenech
The type of onKeyPressshould be KeyboardEventHandler<T>, which can be written in either of the following ways:
的类型onKeyPressshould KeyboardEventHandler<T>，可以写成以下两种方式之一：
handleKeywordKeypress: KeyboardEventHandler<FormControl> = e => {
// use e.keyCode in here
}
or
或者
import { KeyboardEvent } from "react";
handleKeywordKeypress = (e: KeyboardEvent<FormControl>) => {
// use e.keyCode in here
};
As you identified in your answer, if you go with the second option, you need to specifically use KeyboardEventfrom React.
正如您在回答中确定的那样，如果您选择第二个选项，则需要专门使用KeyboardEvent来自 React.
Note that the keyCodeis directly available as a property on e; you don't need to access it via the nativeEvent.
请注意，keyCode可直接用作e; 您无需通过nativeEvent.
Also, the generic type parameter Tshould be the FormControlcomponent, rather than its props, so you should change your other handler too.
此外，泛型类型参数T应该是FormControl组件，而不是它的道具，因此您也应该更改其他处理程序。
