CODEWITHSUNDEEP
javascriptreactjstypescript
Тимур
Тимур

Reputation: 25

React typescript onClick event typing

I'm making a React + typescript project. And i have number button which looks like this:

<button className="num" type='button' value={'1'} onClick={inputHandler}>1</button>

You can notice that i also have onClick={inputHandler} on that button:

  const inputHandler = (event: any) => {
   event.preventDefault();
   setInput(prev => prev.replace('_', event.target.value));}

This handler taking a value prop of button and setting it in to the input. So i am stucked on typing event for this handler. Every type i am defining returns:

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

If i typing it as "any", obviously it working. But i need to define exact type for it. Help me please.

Upvotes: 2

Views: 8051

Answers (2)

Youssouf Oumar
Youssouf Oumar

Reputation: 45883

You can use event: React.MouseEvent<HTMLButtonElement, MouseEvent> as type, like so:

const inputHandler = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
  event.preventDefault();
  //...
};

Edit angry-fast-upe615

Upvotes: 2

Chubby Cows
Chubby Cows

Reputation: 465

Usually I'll type the event argument as a generic Event.

Inside the function I'll make a variable that receives the actual HTML element and then cast the type using the as keyword, because the argument "event" itself is not a HTML element, it is more advisable to make a variable with the target.

  const inputHandler = (event: Event) => {
    event.preventDefault();
    const element = event.target as HTMLButtonElement;
    setInput(prev => prev.replace('_', element.value));
  }

Upvotes: 3

Related Questions