how do i type e.key and e.target.value with typescript in react

Question

i need e.key and e.target.value but i can't seem to make it work with this code:

const handleInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement> ) => {
  if(e.key ==='Enter') { 
    dfTextQuery(e.target.value)
  }
};

why is target not having the value property? and i am getting an error:

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

i was expecting with HTMLInputElement, it should work. how do i type e.key and e.target.value with typescript in react?

Does this answer your question? [Property 'value' does not exist on type 'EventTarget'](https://stackoverflow.com/questions/42066421/property-value-does-not-exist-on-type-eventtarget) — wentjun, Jan 03 '20 at 05:50
glad to help. it is the assertion in typescript. more about it https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html — Ashot Aleqsanyan, Jan 03 '20 at 05:51

score 3 · Answer 1 · answered Jan 24 '22 at 07:56

In the browser, events are bubbling, going from child to parent. the target element from your event is the source of the original event. In your case, the keyboard event will be dispatched from your input field, and will never come from another child.

Instead of using target, you can use currentTarget which corresponds to the DOM element on which the listener is attached. This will be your input field, and so will always be an HTMLInputElement.

how do i type e.key and e.target.value with typescript in react

1 Answers1