CODEWITHSUNDEEP
reactjstypescript
Sipan
Sipan

Reputation: 221

React(Typescript) onchange event type

In My React Component I have Radio input

<input type="radio" onChange={changeData}>

and

function changeData(e: any) {}

How can I specify event type I don't want to use any. enter image description here

Upvotes: 9

Views: 12117

Answers (5)

Foysal imran
Foysal imran

Reputation: 143

You can specify the event type as React.ChangeEvent:

const changeData = (e: React.ChangeEvent<HTMLInputElement>) => {
  // your implementation here
};

<input type="radio" onChange={changeData} />

The React.ChangeEvent type is a generic type that represents a change event in a DOM element. The HTMLInputElement type represents an HTML element.

Upvotes: 0

LEMUEL ADANE
LEMUEL ADANE

Reputation: 8846

Just do this:

changeData = (event: Event) => {
      const { value } = event.target as unknown as { value: boolean, };
      setState(value);
};
  
<input type='radio' onChange={changeData} />

And the squeegee lines will go away.

Upvotes: 0

Roman
Roman

Reputation: 21883

One might want to write it this way:

const changeData: React.ChangeEventHandler | undefined = 
  (event: React.ChangeEvent<HTMLTextAreaElement>) => {}

and then

<input type="radio" onChange={changeData}>

Upvotes: 0

pramod singh
pramod singh

Reputation: 511

changeData = (e: React.MouseEvent<HTMLInputElement>): void => { // code }

Upvotes: 0

Kalhan.Toress
Kalhan.Toress

Reputation: 21911

Check this out

changeData = (e: React.ChangeEvent<HTMLInputElement>)=> {
    .....
}

Upvotes: 16

Related Questions