从React（TypeScript）导入事件类型

Question

如何从React导入事件类型？

例如，如何导入KeyboardEvent，以便可以将其用于onKeyDown回调类型注释？

我浏览了Material-ui .d.ts文件，发现在该文件中使用了React中定义的EventTypes

onKeyDown?: React.KeyboardEventHandler;

在React .d.ts中

type KeyboardEventHandler = EventHandler<KeyboardEvent>;

但是我找不到使用导入它们的方法...

Answer 1

对我来说很好

handleKeyPress (event: React.KeyboardEvent): any {
}

我也用了Material-ui

Answer 2

添加KeyboardEvent到您的反应导入语句。然后，在您的处理程序中，您可以使用 KeyboardEvent 类型。如果你没有在 import 语句中指定它，你将使用 KeyBoardEvent 的 ES5 声明，它不会与你的反应项目一起编译。

import React, { Component, KeyboardEvent } from "react";

export class MyInput extends Component{
...

  handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
    console.log(e);
    // Do something here
  }

  render() {
      return (
        <input onKeyDown={this.handleKeyDown.bind(this}/>
      );
    }
  }
}