Os formulários são essenciais para aplicativos da web, permitindo a interação do usuário e a coleta de dados. No React.js, a construção de formulários envolve o uso de gerenciamento de estado e arquitetura orientada a componentes para garantir eficiência e facilidade de manutenção. Este guia abordará as melhores práticas para a construção de formulários em React.js, tornando seu aplicativo robusto e fácil de usar.
 

1. Use componentes controlados

 
Componentes controlados são a forma preferida de lidar com entradas de formulário no React. Eles mantêm os dados do formulário no estado do componente, facilitando o gerenciamento e a validação.
 
Armazene todos os valores de entrada do formulário em um estado. Crie um objeto e mapeie todas as entradas com suas propriedades no estado, exemplo abaixo

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  

2. Tratamento de erros

 
O tratamento e validação de erros é uma parte importante de um formulário. Você deve validar e verificar erros para cada valor inserido pelo usuário e tratar todos os casos como:

• Obtendo nulo/indefinido
• Obtendo valor vazio
• Tipo de dados inválido, etc.

Deve implementar a validação do lado do cliente para aprimorar a experiência do usuário e reduzir a carga do servidor, o que eventualmente melhora o desempenho. Utilize bibliotecas como Yup ou lógica de validação personalizada para garantir a integridade dos dados.

Vamos ver como implementar lógica de validação personalizada

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  

 
Para facilitar o trabalho, você deve usar o pacote Yup para validar facilmente os dados do formulário. É um pacote muito popular usado com bibliotecas de formulários como React-Hook-Form ou Formik.
Sim, documentos: https://www.npmjs.com/package/yup
 

3. Aproveite bibliotecas de terceiros

 
Bibliotecas como Formik e React Hook Form simplificam o gerenciamento de formulários, oferecendo recursos poderosos prontos para uso e facilitando para os desenvolvedores construir e validar formulários de maneira mais escalonável e flexível

Usando Formik:

Documentos: - https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   
 
    
Sign Up
     {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  

    First Name
    Last Name
    Email
    Submit
  
 
);


ReactDOM.render(, document.getElementById('root'));

Clique para verificar a demonstração do Formik ao vivo

Conclusão

 
Construir formulários em React.js pode ser simples e eficiente seguindo estas práticas recomendadas. Use componentes controlados para gerenciamento de estado, valide minuciosamente as entradas, aproveite bibliotecas de terceiros, aprimore a UX com estilo adequado e otimize o desempenho para criar formulários responsivos e robustos.
Ao aderir a essas diretrizes, você pode garantir que seus formulários sejam confiáveis, fáceis de usar e fáceis de manter, proporcionando uma experiência perfeita para usuários e desenvolvedores.