Oi Sebastião, tudo bem?
Desculpe a demora em retornar.
Entendo que você esteja tendo dificuldades em inibir o refresh da página após o envio do formulário. Realmente, o uso do hook useForm pode interferir nos meios tradicionais para evitar o refresh, como o preventDefault().
Uma alternativa para solucionar este problema é utilizar a função handleSubmit() fornecida pelo hook useForm. Essa função é responsável por lidar com o envio do formulário e, por padrão, ela faz o refresh da página após a conclusão do envio. No entanto, é possível sobrescrever esse comportamento e impedir o refresh.
Para isso, basta adicionar um parâmetro na função handleSubmit(), como mostrado abaixo:
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
// Código para processar os dados do formulário
// Impede o refresh da página após a conclusão do envio
event.preventDefault();
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* Campos do formulário */}
</form>
);
Note que foi adicionado o parâmetro event
na função onSubmit() e, em seguida, chamado o método preventDefault() para impedir o refresh da página. É importante ressaltar que, para utilizar o parâmetro event, é necessário que ele seja passado pela função handleSubmit().
Dessa forma, ao clicar no botão de envio do formulário, o refresh da página será impedido e o código dentro da função onSubmit() será executado normalmente.
Espero que essa solução possa te ajudar a resolver o seu problema e desculpe mais uma vez pela demora.
Um abraço e bons estudos.