Los formularios son parte integral de las aplicaciones web y permiten la interacción del usuario y la recopilación de datos. En React.js, la creación de formularios implica el uso de gestión de estado y arquitectura basada en componentes para garantizar la eficiencia y la mantenibilidad. Esta guía cubrirá las mejores prácticas para crear formularios en React.js, haciendo que su aplicación sea sólida y fácil de usar.
 

1. Utilice componentes controlados

 
Los componentes controlados son la forma preferida de manejar las entradas de formulario en React. Mantienen los datos del formulario en el estado del componente, lo que facilita su administración y validación.
 
Almacene todos los valores de entrada del formulario en un estado. Cree un objeto y asigne todas las entradas con su propiedad en el estado, ejemplo a continuación

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. Manejo de errores

 
El manejo y validación de errores es una parte importante de un formulario. Debe validar y verificar si hay errores para cada valor ingresado por el usuario y manejar todos los casos como:

• Obteniendo nulo/indefinido
• Obteniendo valor vacío
• Tipo de datos no válido, etc.

Debe implementar la validación del lado del cliente para mejorar la experiencia del usuario y reducir la carga del servidor, lo que eventualmente mejora el rendimiento. Utilice bibliotecas como Yup o lógica de validación personalizada para garantizar la integridad de los datos.

Veamos cómo implementar una lógica de validación 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 el trabajo, debe utilizar el paquete Yup para validar sin problemas los datos del formulario. Es un paquete muy popular que se utiliza con bibliotecas de formularios como React-Hook-Form o Formik.
Sí, documentos: https://www.npmjs.com/package/yup
 

3. Aproveche las bibliotecas de terceros

 
Bibliotecas como Formik y React Hook Form simplifican la gestión de formularios, ofrecen potentes funciones listas para usar y facilitan a los desarrolladores la creación y validación de formularios de una manera más escalable y flexible

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'));

Haga clic para ver la demostración en vivo de Formik

Conclusión

 
Crear formularios en React.js puede ser sencillo y eficiente si se siguen estas mejores prácticas. Utilice componentes controlados para la gestión del estado, valide las entradas minuciosamente, aproveche bibliotecas de terceros, mejore la experiencia de usuario con un estilo adecuado y optimice el rendimiento para crear formularios responsivos y sólidos.
Al seguir estas pautas, puede asegurarse de que sus formularios sean confiables, fáciles de usar y fáciles de mantener, brindando una experiencia perfecta tanto para los usuarios como para los desarrolladores.