React + TypeScript

Question

I'm trying to write a properly typed callback function for the onKeyPress event.

I've tried giving either the function or the event various types, but I can't seem to get the event e to be recognized as having both the key field and the target.value field.

Case 1:

 const onKeyPress: React.KeyboardEventHandler = async (e) => {
     if (e.key === "Enter") {
         console.log(e.target.value);
     }
 };

Message:

TS2339: Property 'value' does not exist on type 'EventTarget'.

Case 2:

 const onKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
         console.log(e.target.value);
     }
 };

Message:

TS2339: Property 'value' does not exist on type 'EventTarget'.

Case 3:

Turns out that even writing this simple JSX is going to throw out the same error:

 <input type="text" onKeyPress={(e) => {
     const key = e.key;
     const val = e.target.value;
 }}/>

Environment

From package.json:

"@types/react": "^16.8.3"

"react": "^16.8.2"

"react-dom": "^16.8.2"

TypeScript 3.2.1.

Any clue?

Update

Accepted answer led me to this working piece of code:

 const onKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
         console.log(`Received: ${e.currentTarget.value}`);
         await doAsyncStuff(e.currentTarget.value);
     }
 };

Axnyff · Accepted Answer · 2019-02-17 16:20:53Z

4

Typescript is right here, value does not exists on any html element. You need to be more precise about what kind of element it is.

If you replace your event by

React.KeyboardEvent<HTMLInputElement>

it should work.

You also need to use event.currentTarget instead of target.

edited Feb 17, 2019 at 16:20

answered Feb 17, 2019 at 16:05

Axnyff

10.1k4 gold badges36 silver badges40 bronze badges

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

4 Comments

Andrei Over a year ago

Tried that as well, updating OP to reflect this.

Andrei Over a year ago

Looks like event.currentTarget and the event type you mentioned did the trick. I had tried it event.currentTarget before, but I must have had some other type applied to the event and it failed. It works now. Accepted as the right answer.

Axnyff Over a year ago

React resuses event so you can't access them in n asynchronous way, I think that's way it probably does not work with await.

Andrei Over a year ago

I updated the OP with the final and working code I'm running. Thanks for your help.

Mateusz Kocz · Accepted Answer · 2019-02-17 16:54:44Z

The target property refers to an element the event occurs on, not the element the handler was attached. That's why it only has properties common to all events, and value is not one of them.

In order to access the value property, you need to get it from the currentTarget property.

You can see this behaviour in the React's type definition file.

/**
 * currentTarget - a reference to the element on which the event listener is registered.
 *
 * target - a reference to the element from which the event was originally dispatched.
 * This might be a child element to the element on which the event listener is registered.
 * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
 */

cantuket · Accepted Answer · 2019-02-17 16:39:01Z

0

Try...

 const onKeyPress = async (e: React.KeyboardEvent<FormControl>) => {
      console.log(e.target.value);
 };

OR

 const onKeyPress = async (e: KeyboardEventHandler<FormControl>) => {
     console.log(e.target.value);
 };

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

answered Feb 17, 2019 at 16:39

cantuket

1,59010 silver badges20 bronze badges

Collectives™ on Stack Overflow

React + TypeScript

Case 1:

Case 2:

Case 3:

Environment

Update

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Case 1:

Case 2:

Case 3:

Environment

Update

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related