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.

this might help stackoverflow.com/questions/42081549/…

Shubham Khatri
– Shubham Khatri

2017-09-28 07:03:15 +00:00
Commented Sep 28, 2017 at 7:03 — Shubham Khatri
– Shubham Khatri, Commented Sep 28, 2017 at 7:03

Shorn · Accepted Answer · 2020-09-04 00:39:43Z

62

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

edited Sep 4, 2020 at 0:39

answered Sep 29, 2017 at 0:16

Shorn

22.1k18 gold badges110 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

unflores Over a year ago

If you wanted to simply specify KeyBoardEvent, you have to import it from React, that is all. import {KeyboardEvent} from 'react';

underfrankenwood · Accepted Answer · 2022-03-09 22:16:38Z

22

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
};

answered Mar 9, 2022 at 22:16

underfrankenwood

9452 gold badges13 silver badges33 bronze badges

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

windmaomao Over a year ago

i don't know what is FormControl, and I believe HTMLInputElement should be the right one since other events are also borrowing from there.

Tom Fenech · Accepted Answer · 2017-09-29 07:14:23Z

7

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.

edited Sep 29, 2017 at 7:14

answered Sep 28, 2017 at 7:28

Tom Fenech

75.1k13 gold badges119 silver badges154 bronze badges

2 Comments

Shorn Over a year ago

I don't see how your type declaration gets me access to the data I want without casting? See my answer.

Tom Fenech Over a year ago

You're right, I have edited to improve my answer. Some of it is now quite similar to yours but hopefully there are still some extra useful things in there.

Robert Rendell · Accepted Answer · 2023-02-02 09:58:14Z

2

The answer for me is a combination of two answers on this page, which only requires React is in scope.

Thanks @Shorn for React.KeyboardEvent @underfrankenwood for HTMLInputElement

import React from "react";
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
   // ...
};

answered Feb 2, 2023 at 9:58

Robert Rendell

2,3431 gold badge19 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related