Additional arguments for React event handlers (using functional components)

user_15112408 0
Viewed 97

I want to pass an additional argument to onChange (event handler) of an <input> tag, apart from the event object. How do I do that?

Suppose, I have such a function

const f = (event, i) => {//stuff}

Can I do this? (I know it doesn't work)

<input onChange=f(1) />

Assuming, the event object gets passed in as the first argument automatically?

Note - I am using functional components

react-hooks reactjs event-handling
2 Answers

To pass an argument to onChange handler of tag, you can do the following:

<input type="text" onChange={ (event)=>f(event,i) } />

Although event object is automatically available, you will have to pass it to the function so as to make use of it.

user_99603450

I wanted an idiomatic TypeScript solution, so, for all the awesome TypeScripters out there, in the wild:
React v18
Declare and define a custom event handler as shown below:

import type { ChangeEvent, SyntheticEvent } from "react";

type MyCustomEventHandler<E extends SyntheticEvent<any>> = {
  bivarianceHack(event: E, ...args: any): unknown;
}["bivarianceHack"];
type MyCustomChangeEventHandler<T = Element> = MyCustomEventHandler<ChangeEvent<T>>;

// Declare and define your custom function
// with as many as arguments as your desire.
const f: MyCustomChangeEventHandler = (event, i: string) => { /*stuff*/ };

Doing so will keep the TypeScript linter happy!

<input type="text" onChange={(event) => f(event, "God is a programmer!")} />
user_131781240
Related