15

How to import Event Types from React?

For an example how to import KeyboardEvent so it can be used for onKeyDown callback type annotation?

I have browsed Material-ui .d.ts file and found that in that file EventTypes are used as defined in React

onKeyDown?: React.KeyboardEventHandler;

And in React .d.ts

type KeyboardEventHandler = EventHandler<KeyboardEvent>;

But I can't find a way to use import them ...

3 Answers 3

33

It's works fine for me:

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

And I use material-ui too

8

Add KeyboardEvent to your react import statement. Then, in your handler you can use the KeyboardEvent type. If you don't specify it in the import statement, you will use ES5 declaration of KeyBoardEvent, which won't compile with your react project.

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

If you receive error "KeyboardEvent requires type argument" with React 16.1+ you can do:

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

where the generic arg is the type of your element.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.