Question

我正在尝试使用 react hook 表单在我的 react native 应用程序中创建一个屏幕。我需要将我的导航对象传递给我的提交功能以使我的路由工作。这是使用 React Hook Form 中的代码的示例：

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    //Want to be able to access the object here when it is passed as a parameter
    console.log(data);
  };

  const navigation = {myObject: "My object"}; //Want to pass this to the onSubmit function from the onSubmit call in the form

  return (
    <form onSubmit={handleSubmit(onSubmit)}> //Want to pass the object to the function here
      <input defaultValue="test" {...register("example")} />

      <input type="submit" />
    </form>
  );
}

*为了清晰起见，去掉了代码。

那么，如何将我的对象传递给“onSubmit={handleSubmit(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 表单中将对象传递给 onSubmit

3 个答案: