是否可以在 React 功能方法中通过 onChange 事件传递附加参数答案

【问题标题】：Is it possible to pass an additional parameter with an onChange event in React functional approach是否可以在 React 功能方法中通过 onChange 事件传递附加参数
【发布时间】：2020-12-23 08:25:03
【问题描述】：

我想做类似的事情，

<Input onChange={(e,myExtraParameter) => enteredData}/>

然后写我的 onChange 之类的，

enteredData = (e :React.FormEvent<HTMLTextAreaElement> | React.FormEvent<HTMLInputElement>,myExtraParameter : string ) => {
    console.log("extra parameter = " , myExtraParameter);

}

也就是说，我想检查我的按键输入，并使用额外的参数对其进行处理。

我检查了有关在基于 React 类的方法中传递此类选项的资源，我可以在其中使用“this”指针。但是在 React 函数式组件函数式方法中怎么做呢？

【问题讨论】：

通常类似于onChange={e => myFunction(e, extraParameter)}，您将事件对象代理到回调并添加任何其他数量的参数。您尝试使用的实际代码是什么？
不，处理程序是由 React 调用的。不过，您可以将事件传递给 your 函数。或者，如果您需要在整个应用中执行此操作，您可以包装组件并提供您自己的 onChange 处理程序。
@DrewReese ...是的，这很有帮助。
在基于类的组件和功能组件中将回调作为道具传递并没有什么不同。 props 是 API，即组件的接口，这与实际的组件实现无关。一个反应组件是一个反应组件是一个反应组件。

标签： reactjs react-hooks react-hook-form

【解决方案1】：

是的，你可以传递任何值，只要接收它的函数允许它，否则不会得到它。

例子。

<input type="text" id="name" name="name" onChange={(event) => readName(event, "Miss")} />

现在的功能

const readName = (event, gender) => {
  const { target: { value } } = event;
  console.log(value,gender);
}

【讨论】：