Question

如何从React导入事件类型？

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

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

onKeyDown?: React.KeyboardEventHandler;

在React .d.ts

type KeyboardEventHandler = EventHandler<KeyboardEvent>;

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

Answer 1

这对我来说很好用：

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

我也使用材料-ui

Answer 2

如果您在React 16.1+上收到错误“ KeyboardEvent requires type argument”，则可以执行以下操作：

private onKeyDown = (event: React.KeyboardEvent<any>) => { ... }

Answer 3

在您的react import语句中添加KeyboardEvent。然后，您可以在处理程序中使用KeyboardEvent类型。如果未在import语句中指定它，则将使用KeyBoardEvent的ES5声明，该声明不会与您的react项目一起编译。

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

从React导入事件类型（TypeScript）

3 个答案: