typescript/react onKeyPress 参数的正确类型是什么？

IT技术 reactjs typescript react-bootstrap
2021-03-25 04:44:54

typescript 2.3.4，react 15.5.4 和react引导 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 键。

2个回答

这似乎有效：

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 定义）。

如果你想简单地指定 KeyBoardEvent，你必须从 React 中导入它，仅此而已。 import {KeyboardEvent} from 'react';
2021-06-08 04:44:54

的类型onKeyPressshould 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组件，而不是它的props，因此您也应该更改其他处理程序。

我不明白你的类型声明如何让我在不强制转换的情况下访问我想要的数据？看我的回答。
2021-06-06 04:44:54
你是对的，我已经编辑以改进我的答案。其中一些现在与您的非常相似，但希望那里还有一些额外有用的东西。
2021-06-14 04:44:54
其它你可能感兴趣的问题
上一篇将 React forwardRef 与 Typescript 通用 JSX 参数一起使用 下一篇类型“null”不可分配给类型“HTMLInputElement”ReactJs