Entradas controladas versus não controladas (introdução)
Entenda a diferença entre entradas controladas (valor vinculado ao estado) e não controladas (o DOM gerencia o valor).
Entradas controladas versus não controladas (introdução) é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 3 aulas no total.
Visão geral
Objetivo: comparar campos de entrada controlados e não controlados. Os controlados usam o estado do React como fonte da verdade; os não controlados deixam isso para o DOM.
Campos de entrada controlados
Campos de entrada controlados: o value está vinculado ao estado e é atualizado por onChange. O React sempre conhece o value mais recente.
Demonstração: campo de entrada controlado
Este campo de entrada é controlado: o value vem do estado e é atualizado a cada alteração.
<div id="root"></div>
Campos de entrada não controlados
Campos de entrada não controlados: o DOM mantém seu próprio value; você pode lê-lo usando referências apenas quando necessário.
Demonstração: campo de entrada não controlado
Aqui o campo de entrada é não controlado: o React não gerencia o value; nós o lemos com uma referência ao clicar no botão.
<div id="root"></div>
Dicas e compensações
Dicas:
- Controlado = previsível, o estado do React controla a interface.
- Não controlado = mais simples, mas com menos controle.
- Prefira campos controlados em formulários.
Verificação de campo controlado
Recapitulação
Recapitulação: campos de entrada controlados são vinculados ao estado do React para oferecer confiabilidade. Campos de entrada não controlados deixam o DOM gerenciar os valores. Prefira campos controlados na maioria dos formulários.
Perguntas Frequentes
A aula “Entradas controladas versus não controladas (introdução)” é grátis?
Sim — o texto completo de “Entradas controladas versus não controladas (introdução)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 3 aulas no total.
O que vou aprender em “Entradas controladas versus não controladas (introdução)”?
Entenda a diferença entre entradas controladas (valor vinculado ao estado) e não controladas (o DOM gerencia o valor). Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Entradas controladas versus não controladas (introdução)”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos de useState e atualizações corretas
- Tratamento de eventos: onClick e onChange
- Entradas controladas versus não controladas (introdução)