reactjs - importovať typy udalostí z Reactu (TypeScript)

Ako importovať typy udalostí z Reactu?

Ako príklad, ako importovať KeyboardEvent, aby sa mohol použiť pre anotáciu typu callbacku onKeyDown?

Prezrel som si súbor Material-ui .d.ts a zistil som, že v tom súbore sa EventTypes používajú tak, ako sú definované v React.

onKeyDown?: React.KeyboardEventHandler;

A v React .d.ts

type KeyboardEventHandler = EventHandler<KeyboardEvent>;

Ale nemôžem nájsť spôsob, ako ich importovať ...

Odpoveď č. 1

Pre mňa to funguje dobre:

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

A ja tiež používam material-ui

Odpoveď č. 2

Pridajte KeyboardEvent do svojho importu reactu. Potom vo vašom handleri môžete použiť typ KeyboardEvent. Ak ho nešpecifikujete v importovom vyhlásení, použijete ES5 deklaráciu KeyBoardEvent, ktorá sa nebude kompilovať s vaším react projektom.

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

Súvisiace články