Question

Typescript 2.3.4，反应15.5.4和react-bootstrap 0.31.0。

我有一个FormControl，我想在用户按Enter键时执行某些操作。

控件：

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

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

Answer 1

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组件，而不是其道具，因此您也应该更改其他处理程序。

Answer 2

这似乎有效：

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

对我来说，关键（HaHa。）是指定React.KeyboardEvent，而不是KeyboardEvent。

围绕React代码，我看到的定义如下：

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

但是没有意识到当我指定KeyboardEvent作为我的处理程序的参数类型时，我实际上是在某处获取了Typescript库中指定的KeyboardEvent（而不是React）定义）。

打字稿/反应onKeyPress参数的正确类型是什么？

2 个答案: