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

问题

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 kepress: Enter but what should the type of e be so that I can compare the value against (what?) to tell if Enter was pressed.

回答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
}

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.

回答2:

This seems to work:

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

The key (HaHa.) 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 specifying KeyboardEvent as the parameter type for my handler, I was actually picking up the KeyboardEvent specified in the Typescript libraries somewhere (rather than the React definition).

来源：https://stackoverflow.com/questions/46462841/typescript-react-whats-the-correct-type-of-the-parameter-for-onkeypress

标签

reactjs

typescript

react-bootstrap