React事件处理程序的其他参数(使用功能组件)

Question

除了event对象之外，我还想向<input>标记的onChange(事件处理程序)传递一个额外的参数。我该怎么做？

假设，我有这样一个函数

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

我能做这个吗？(我知道它不起作用)

<input onChange=f(1) />

假设event对象自动作为第一个参数传入？

注意-我正在使用功能组件

Answer 1

要将参数传递给标记的onChange处理程序，可以执行以下操作：

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

虽然事件对象是自动可用的，但您必须将其传递给函数才能使用它

Answer 2

我想要一个惯用的TypeScript解决方案，所以，对于所有出色的TypeScripter来说：
React v18
声明并定义一个自定义事件处理程序，如下所示：

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*/ };

这样做会让TypeScript linter感到高兴！

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