Crie formulários interativos e elegantes com facilidade
Formulários utilizando a biblioteca React são muito importantes o seu entendimento, pois quanto mais campos para se controlar maiores serão as chances de se perder durante a lógica.
Abaixo segue um pontapé inicial de como utilizar um formulário no React e também fazer uma validação mínima para trazer ainda mais confiabilidade para seus dados.
import React, { useState } from "react";
const LoginForm = () => {
const [values, setValues] = useState({
email: "",
password: "",
});
const [errors, setErrors] = useState({
email: "",
password: "",
});
const handleChange = (e) => {
setValues({ ...values, [e.target.name]: e.target.value });
};
const validateForm = () => {
const newErrors = {};
if (!values.email) {
newErrors.email = "Email é obrigatório";
} else if (!/\S+@\S+\.\S+/.test(values.email)) {
newErrors.email = "Email inválido";
}
if (!values.password) {
newErrors.password = "Senha é obrigatória";
}
return newErrors;
};
const handleSubmit = (e) => {
e.preventDefault();
const validationErrors = validateForm();
setErrors(validationErrors);
if (Object.keys(validationErrors).length === 0) {
// Enviar formulário aqui
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
value={values.email}
onChange={handleChange}
/>
{errors.email && <p>{errors.email}</p>}
</div>
<div>
<label htmlFor="password">Senha</label>
<input
type="password"
id="password"
name="password"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
</div>
<button type="submit">Enviar</button>
</form>
);
};
export default LoginForm;
Entendimento do código
Neste exemplo, usamos useState para gerenciar o estado dos inputs do formulário e dos erros de validação. A função handleChange é usada para atualizar o estado dos valores dos inputs sempre que o usuário digita algo. A função validateForm é usada para validar os inputs antes de enviar o formulário. Se houver erros, eles serão armazenados no estado errors usando setErrors. Por fim, a função handleSubmit é usada para gerenciar o envio.
Validação de e-mail
O regex utilizado na validação de e-mail (/\S+@\S+\.\S+/) é uma expressão regular que verifica se o valor inserido é uma string válida de endereço de e-mail.
Aqui está uma explicação detalhada do regex:
/ \S+ - Um ou mais caracteres que não são espaços em branco @ - O caractere @ \S+ - Um ou mais caracteres que não são espaços em branco \. - O caractere ponto (.) \S+ - Um ou mais caracteres que não são espaços em branco /
O objetivo desta expressão regular é garantir que o valor inserido tenha pelo menos um caractere antes e depois do @, além de pelo menos um caractere antes e depois do ponto, para que seja considerado um endereço de e-mail válido.
Explicando nos mínimos detalhes…
A função handleSubmit é uma função do React que é chamada quando o formulário é enviado. Aqui está uma explicação detalhada do que esta função faz:
e.preventDefault(): Esta linha impede que o comportamento padrão de submit de formulários seja executado. Isso é feito para que você possa controlar o que acontece quando o formulário é enviado.const validationErrors = validateForm(): Aqui, chamamos a funçãovalidateFormpara validar os inputs do formulário. Se houver erros de validação, eles serão retornados como um objeto, caso contrário, será retornado um objeto vazio.setErrors(validationErrors): Aqui, usamos a funçãosetErrorspara armazenar os erros de validação no estadoerrors.if (Object.keys(validationErrors).length === 0): Aqui, verificamos se o objeto de erros de validação está vazio. Se estiver vazio, significa que não houve erros de validação e podemos continuar com o envio do formulário.// Enviar formulário aqui: Aqui, você pode adicionar a lógica para enviar o formulário. Por exemplo, você pode enviar os dados para uma API usando uma biblioteca como Axios ou Fetch.
A função handleSubmit é uma função importante no gerenciamento de formulários com React, pois permite que você faça a validação dos inputs antes do envio e tome as medidas necessárias (como exibir erros) antes de enviar o formulário.
Em resumo…
Este foi apenas um exemplo simplificado de um formulário com validação feito com a biblioteca React JS que pode ser facilmente utilizada em seus projetos, ou apenas como objeto de estudo.
