Typescript/React中onKeyPress的参数应该使用哪种正确的类型？

Question

Typescript 2.3.4、react 15.5.4 和 react-bootstrap 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

---

这可能会有所帮助 https://dev59.com/4lgQ5IYBdhLWcg3w4n3z - Shubham Khatri

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作为处理程序的参数类型进行复制/粘贴时，编译器实际上选择了在Typescript库中定义的某种默认类型KeyboardEvent（而不是React的定义）。

- Shorn

---

如果您想简单地指定KeyBoardEvent，您必须从React中导入它，就这样。import {KeyboardEvent} from 'react'; - unflores

Answer 2

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

import { KeyboardEvent } from 'react';

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

- underfrankenwood

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

我不知道什么是 FormControl，但我相信 HTMLInputElement 应该是正确的选择，因为其他事件也是从那里借鉴的。 - windmaomao

Answer 3

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
};

正如你在回答中提到的那样，如果选择第二个选项，你需要明确使用React中的KeyboardEvent。

请注意，keyCode 可以直接作为 e 的属性使用；你不需要通过 nativeEvent 访问它。

另外，通用类型参数T应该是FormControl组件，而不是它的props，所以你也应该更改其他处理程序。

- Tom Fenech

---

我不明白你的类型声明如何让我访问所需的数据而无需转换？请看我的回答。 - Shorn

你说得对，我已经进行了编辑以改进我的答案。现在它的一部分与你的相似，但希望仍然有一些额外有用的东西在里面。 - Tom Fenech

Answer 4

对我来说，答案是这个页面上两个答案的结合，只需要React在范围内。

感谢@Shorn提供的React.KeyboardEvent和@underfrankenwood提供的HTMLInputElement

import React from "react";
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
   // ...
};

- Robert Rendell