1
resposta

Inibir Refresh em página

Bom dia pessoal, estou com uma questão aqui que estou tendo um pouco de dificuldade em solucionar.

Tenho um formulário e uma lista que apresenta tarefas que são inseridas neste form, estou usando o hook useForm. é uma página simples que está sendo colocado dentro bord do azure.

Este é o cenário, quando clico no botão para salvar ele faz tudo o que tem ser feito porém logo após se faz um refresh na página fechando e ressetanto o fumuilário, eu já tentei inibir este reload indesejado com os meios tradicionais, como preventDefault(), mas parece que no useForm não funciona.

Alguém tem uma direção please.

Grato.

1 resposta

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.