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 control:

<FormControl
  name="keyword"
  type="text"
  value={this.state.keyword}
  onKeyPress={this.handleKeywordKeypress}
  onChange={(event: FormEvent<FormControlProps>) =>{
    this.setState({
      keyword: event.currentTarget.value as string
    });
  }}
/>

What should the definition of the parameter for handleKeywordKeypress be?

I can define it like this:

handleKeywordKeypress= (e: any) =>{
  log.debug("keypress: " + e.nativeEvent.code);
};

That will be called, and it will print keypress: Enter but what should the type of e be so that I can compare the value against (what?) to tell if Enter was pressed.

Answer 1

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).

Answer 2

Both of the answers above didnt solve my issue, it should be pretty simple and straightforward:

import { KeyboardEvent } from 'react';

const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
   // do stuff
};

Answer 3

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.