Dynamic Forms Campos de Formulário Dinâmicos

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

Dynamic Forms Campos de Formulário Dinâmicos

Quando a quantidade de campos não é fixa, conduza a renderização a partir de um array mantido no estado: cada campo guarda um registro, adicionar e remover campos significa adicionar e remover itens do array, e atualizar um único campo significa percorrer o array e substituir a entrada com o id correspondente. Com keys estáveis, o React reutiliza corretamente o estado de entrada de cada linha. O array é a única fonte de verdade, então adicionar, editar e remover são três pequenas atualizações puras em vez de três pedaços de estado separados para reconciliar.

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

const [rows, setRows] = useState([{ id: 1, name: '' }])

setRows([...rows, { id: nextId(), name: '' }])              // add a row
setRows(rows.filter(r => r.id !== id))                      // remove a row
setRows(rows.map(r => r.id === id ? { ...r, name: v } : r)) // edit one cell

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：

Uma linha de entrada por padrão; clicar em "+ Add row" acrescenta uma linha e "Remove" deleta uma, cada linha mantém sua própria entrada, e a contagem na parte inferior se atualiza em tempo real.

💡 Pontos-chave

🏷️ Mais Padrões de Componentes

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

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.

Sobre Nós