如何将react-hook-form与表单操作一起使用

Question

此代码不会触发任何提交验证。这是登录逻辑发生的部分，使用 Zod 进行验证并使用 React Hook Form 处理表单。由于某种原因，验证不会发生，甚至在没有检查输入内容的情况下就触发了对登录操作的调用。有人能弄清楚为什么会发生这种情况吗？

还可以将 React Hook Form 与操作一起使用吗？

const FormSchema = z.object({
  email: z
    .string()
    .min(1, { message: "This field has to be filled." })
    .email("This is not a valid email."),

  password: z
    .string()
    .min(4, { message: "Password must be at least 4 characters long." }),
});

const LogInForm = ({}: IProps) => {
  const { session, setSession } = useAuth();
  console.log("value", session);

  const [isPending, startTransition] = useTransition();
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const handleLogin = async (formData: FormData) => {
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;
    let user = await signIn(email, password);
    if (isUser(user)) {
      const { email, isSignedIn, error } = user;
      if (error.isError) {
        toast({
          title: `${error?.message}`,
          variant: "destructive",
          action: <XCircle size={25} />,
        });
      } else {
        setSession(user);
        toast({
          title: `${email} logged in successfully!`,
          variant: "success",
          action: <CheckCircle size={25} />,
        });

        redirect("/dashboard");
      }
    }
  };

  return (
    <Form {...form}>
      <form
        action={(formData) => startTransition(() => handleLogin(formData))}
        className="w-2/3 space-y-6"
      >
        <h1 className="text-4xl text-center font-semibold">Login</h1>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <Input type="password" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button
          type="submit"
          className="w-full"
        >
          Login
        </Button>
      </form>
    </Form>
  );
};

export default LogInForm;

有什么想法我做错了什么吗？

Answer 1

尝试将

<Form>

元素上的操作属性替换为

onSubmit

。

如果这没有帮助，请使用 React Hook Form 返回的

handleSubmit

函数来处理表单提交。

const { handleSubmit } = form;
 <Form {...form} onSubmit={handleSubmit(handleLogin)}>
  <form className="w-2/3 space-y-6">