Guia de Construção de Componentes de Formulário React

Guia de Construção de Componente de Formulário React

Construir formulários no React exige um gerenciamento de estado cuidadoso. Este guia mostra como construir um formulário de registro do zero.

Você aprenderá quatro conceitos principais:

• Gerenciamento de Estado Armazene todos os campos do formulário em um único objeto de estado. Use o hook useState para acompanhar nome, idade, e-mail e senha.

• Manipulação de Inputs Use uma única função para gerenciar todas as alterações de input. Você atualiza o estado espalhando os dados antigos e adicionando o novo valor com base no nome do input.

• Validação de Formulário Verifique se todos os campos contêm dados antes do envio. Mostre um alerta se algum campo estiver vazio.

• Suporte ao Teclado Adicione um listener para a tecla Enter. Isso permite que os usuários enviem o formulário sem clicar no botão.

Exemplo de Código:

import { useState } from "react";

function FormValidation() { const [userdata, setUserdata] = useState({ name: "", age: "", mobile: "", email: "", dob: "", password: "" });

function getdata(e) { const { name, value } = e.target; setUserdata({ ...userdata, [name]: value }); }

function validate() { const { name, age, mobile, email, dob, password } = userdata; if (name && age && mobile && email && dob && password) { alert("Submitted successfully"); } else { alert("Please fill all fields"); } }

function handlekey(e) { if (e.key === "Enter") { validate(); } }

return (

Submit

); }

Fonte: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh