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

Form Inputs Controles de Entrada de Formulário

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

Form Inputs Controles de Entrada de Formulário

Campos de texto, caixas de seleção, listas suspensas e áreas de texto seguem todos a mesma lógica de value ou checked somada ao onChange no React, mas leem seu valor em lugares diferentes: controles de texto leem e.target.value, enquanto uma caixa de seleção lê e.target.checked. Dominar essa diferença basta para cobrir quase todo campo de formulário que você for construir. Quando cada controle possui um único pedaço de estado, validação, desativação e renderização condicional tornam-se derivações diretas desse estado em vez de um monte de condicionais espalhadas.

GrupoPadrões de Componentes
TipoPadrão

ℹ️ 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

<input value={text} onChange={e => setText(e.target.value)} />
<input type="checkbox" checked={ok} onChange={e => setOk(e.target.checked)} />
<select value={city} onChange={e => setCity(e.target.value)}>…</select>

Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.

▶ Exemplo

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

Saída：

Os três controles demonstram o padrão controlado para texto, caixa de seleção e lista suspensa; a linha na parte inferior resume todos os valores atuais do formulário em tempo real.
▶ Experimente

💡 Pontos-chave

💡 Dica Uma caixa de seleção ou rádio lê e.target.checked em vez de value — esse é o erro de leitura de valor mais comum entre iniciantes.
ℹ️ Informação No React, uma textarea é controlada por meio de sua prop value, e não colocando o texto dentro da tag como faz o HTML puro.
⚠️ Aviso Uma seleção múltipla precisa do atributo multiple, e seu onChange deve percorrer e.target.selectedOptions para recolher os valores selecionados.
controlled-components usestate event-handling dynamic-forms
Mais casos em breve.

📚 Tutoriais Relacionados

Formulários e Componentes Controlados
Lição 7: uma referência rápida para o padrão controlado de cada tipo de controle de entrada.

❓ Perguntas Frequentes

P Por que uma caixa de seleção lê checked em vez de value?
R A entrada do usuário numa caixa de seleção é o estado booleano "marcado ou não", que mapeia para o atributo checked do DOM; o value é apenas um valor incidental que acompanha.
P Como se escreve uma textarea no React?
R Exatamente como um input, com value mais onChange: value={text}, e sem o texto filho estilo HTML.
P Como leio uma seleção múltipla?
R Adicione multiple ao select e, em seguida, colete um array no onChange com Array.from(e.target.selectedOptions, o => o.value).
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%