Shorn Shorn - 3 years ago 249
TypeScript Question

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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download