如何在 React Hook Form 中将对象传递给 onSubmit

Question

当使用 react-hook-form 时，我需要将任意数据传递给 onSubmit 函数。示例代码：

function App() {
  const { register, handleSubmit } = useForm();
  const navigation = { foo: 'bar' }; // object to pass
  const onSubmit = (data) => {
    // how to access navigation here?
    console.log(data);
    console.log(navigation); // undefined
  }; 
  return (
    <form onSubmit={handleSubmit(onSubmit)}> // <<== pass navigation here as arg? 
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

如何将我的对象 navigation 传递给 onSubmit？

Answer 1

handleSubmit(onSubmit) 表示您通过引用传递 onSubmit 并且它默认采用 data ，像这样调用 handleSubmit :

<form onSubmit={handleSubmit(data => onSubmit(data, navigation))}>

对象应该在此处可用：

const onSubmit = (data, obj) => {
  console.log(data, obj);
};

Answer 2

您好，我猜导航道具是由 App 组件接收的（就像一个道具），然后您可以将它传递给 onSubmit 方法。

试试这个：

"onSubmit={()=>handleSubmit(props.navigation)}"

这里有一个例子https://reactnavigation.org/docs/navigation-prop/

Answer 3

你可以这样做。

const onSubmit = (obj) => (formData) => { 
  console.log(obj);
};

<form onSubmit={handleSubmit(onSubmit(obj))}> // your obj

如何在 React Hook Form 中将对象传递给 onSubmit

How to pass an object to onSubmit in React Hook Form

javascript

reactjs

react-native

react-hook-form