English 中文 العربية 日本語 Português

preventDefault Prevenindo o comportamento padrão

Última atualização: 2026-11-03

preventDefault Prevenindo o comportamento padrão

e.preventDefault() interrompe a ação padrão do navegador para um evento, mais principalmente o recarregamento completo da página causado pelo envio de um formulário. Formulários em React quase sempre chamam essa função logo no início do onSubmit e depois tratam os dados por meio do estado controlado, o que dá um envio sem recarregar a página. É uma chamada de uma linha, mas esquecê-la é um dos bugs mais comuns em formulários React.

GrupoRenderização e Estado
TipoAPI
DesdePrimeiras versões do React

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function handleSubmit(e) {
  e.preventDefault() // Interrompe a ação padrão do navegador (como recarregar a página)
  // Trate o envio com o estado aqui
}
<form onSubmit={handleSubmit}>

⚙️ Parâmetros

e (event object)O evento sintético do React; o preventDefault só pode ser chamado enquanto o handler roda de forma síncrona, então não pode ser guardado para chamar depois.

Retorna：Sem valor de retorno (undefined); depois da chamada a ação padrão do navegador para aquele evento deixa de acontecer.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Um formulário de busca: digite uma palavra e clique em "Search" e a página não recarrega, enquanto "Searched: xxx" aparece abaixo; enviar um valor vazio pede uma palavra-chave — a recarregação completa da página foi evitada com sucesso.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso Prevenir a recarregamento da página depende de e.preventDefault(); devolver false não faz absolutamente nada no React.
💡 Dica Se um button comum dentro de um formulário não deve enviá-lo, dar type="button" a ele também evita o comportamento padrão.
ℹ️ Informação preventDefault interrompe a ação padrão, enquanto stopPropagation impede o evento de subir; os dois são independentes e você escolhe o de que precisa.
event-handling event-parameters usestate controlled-components
Mais casos em breve.

📚 Tutoriais Relacionados

Tratamento de eventos
Lição 5: o pareamento padrão entre envio de formulário e preventDefault.

❓ Perguntas Frequentes

P Por que enviar um formulário React recarrega a página?
R Porque o navegador tem uma ação padrão para envios de formulário. Chame e.preventDefault() na primeira linha do handler onSubmit para bloquear a recarga e tratar os dados com o estado.
P O que o e.preventDefault() faz?
R Ele cancela a ação padrão do navegador para o evento: o formulário não recarrega, uma âncora não navega, o menu de contexto não aparece. Ele só cancela a ação padrão e não impede o evento de se propagar.
P Qual a diferença entre preventDefault e stopPropagation?
R O primeiro bloqueia a "ação padrão" (como recarregar a página), o segundo bloqueia a propagação do evento para os elementos pai; um não afeta o outro e podem ser chamados juntos.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%