Pesquisa de site

reactjs - Como enviar com React Hook Form quando se tem o modo onBlur?


Isso não é como o que esta pergunta está pedindo.

Basicamente, eu tenho um formulário que quero enviar automaticamente sempre que os campos forem alterados. Ou seja, não quero um botão de envio.

Então, tendo isso:

const {
  formState,
  handleSubmit
} = useForm<TSaveInputSchema>({
  mode: "onBlur",
  reValidateMode: "onChange",
  criteriaMode: "firstError",
  resolver: zodResolver(saveInputSchema),
});

const handleSave = useCallback<HandleSaveCallback>(
  (data) => {
    console.log("DATA SUBMIT", data);
  }
), []);

E HTML assim:

<form onSubmit={handleSubmit(handleSave)}>
  <input {...register("name")} />
</form>

não chama a função handleSave quando o campo de entrada perde o foco.

Como isso pode ser feito, se possível? Ou eu tenho que acionar o envio manualmente por outros meios (por exemplo, usando useEffect)?

Resposta #1

Refatoração demais para o dia, a solução foi idiota:

Substituir

<form onSubmit={handleSubmit(handleSave)}>
  <input {...register("name")} />
</form>

com

<input {...register("name", { onBlur:handleSubmit(handleSave) )} />

Resposta #2

Encontrei isto: https://github.com/orgs/react-hook-form/discussions/2494#discussioncomment-1843760

Mexi um pouco e parece que isso está funcionando (agora?):

<form onBlur={handleSubmit(handleSave)}>