Typescript/React what's the correct type of the parameter for onKeyPress?

Question

Typescript 2.3.4, react 15.5.4 and react-bootstrap 0.31.0.

I have a FormControl and I want to do something when the user presses enter.

The cont

Answer 1

The type of onKeyPress should be KeyboardEventHandler<T>, which can be written in either of the following ways:

handleKeywordKeypress: KeyboardEventHandler<FormControl> = e => {
    // use e.keyCode in here
}

or

import { KeyboardEvent } from "react";
handleKeywordKeypress = (e: KeyboardEvent<FormControl>) => {
    // use e.keyCode in here
};

As you identified in your answer, if you go with the second option, you need to specifically use KeyboardEvent from React.

Note that the keyCode is directly available as a property on e; you don't need to access it via the nativeEvent.

Also, the generic type parameter T should be the FormControl component, rather than its props, so you should change your other handler too.

Answer 2

This seems to work:

handleKeywordKeyPress = (e: React.KeyboardEvent<FormControl>) =>{
  if( e.key == 'Enter' ){
    if( this.isFormValid() ){
      this.handleCreateClicked();
    }
  }
};

The key_{(Ha ha)} here, for me, was to specify React.KeyboardEvent, rather than KeyboardEvent.

Trolling around the React code, I was seeing definitions like:

type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>;

But didn't realise that when I was copy/pasting KeyboardEvent as the parameter type for my handler, the compiler was actually picking up the KeyboardEvent which is some kind of default type defined in the Typescript libraries somewhere (rather than the React definition).