Aprender React Formularios y validación

En React 19, la creación de formularios se realiza mediante el uso de componentes controlados y no controlados. Los componentes controlados son aquellos en los que el estado del formulario se gestiona a través del estado del componente de React. Para crear un formulario controlado, utilizamos el hook useState para gestionar los valores de los campos de entrada.

import React, { useState } from 'react';

function FormularioControlado() {
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Nombre: ${nombre}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input
          type="text"
          value={nombre}
          onChange={(e) => setNombre(e.target.value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default FormularioControlado;

Validación de formularios en React 19

La validación de formularios es crucial para asegurar la integridad de los datos. En React 19, podemos manejar la validación de formularios utilizando bibliotecas como Formik y Yup.

Uso de Formik y Yup

Formik es una biblioteca que facilita la gestión de formularios en React, mientras que Yup es una biblioteca de validación de esquemas. A continuación, se muestra cómo implementar la validación con estas herramientas.

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const FormularioConValidacion = () => {
  const formik = useFormik({
    initialValues: {
      nombre: '',
      email: '',
    },
    validationSchema: Yup.object({
      nombre: Yup.string()
        .max(15, 'Debe tener 15 caracteres o menos')
        .required('Campo requerido'),
      email: Yup.string()
        .email('Email inválido')
        .required('Campo requerido'),
    }),
    onSubmit: (values) => {
      console.log(`Nombre: ${values.nombre}, Email: ${values.email}`);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label>
        Nombre:
        <input
          type="text"
          {...formik.getFieldProps('nombre')}
        />
        {formik.touched.nombre && formik.errors.nombre ? (
          <div>{formik.errors.nombre}</div>
        ) : null}
      </label>
      <label>
        Email:
        <input
          type="email"
          {...formik.getFieldProps('email')}
        />
        {formik.touched.email && formik.errors.email ? (
          <div>{formik.errors.email}</div>
        ) : null}
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
};

export default FormularioConValidacion;

Estado del formulario y validación en tiempo real

En React 19, es posible gestionar el estado del formulario y la validación en tiempo real utilizando el hook useEffect para actualizar el estado y validar los campos a medida que el usuario interactúa con el formulario.

import React, { useState, useEffect } from 'react';

const FormularioValidacionTiempoReal = () => {
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  useEffect(() => {
    const validate = () => {
      const newErrors = {};
      if (!nombre) newErrors.nombre = 'Campo requerido';
      if (!email) newErrors.email = 'Campo requerido';
      else if (!/\S+@\S+\.\S+/.test(email)) newErrors.email = 'Email inválido';
      setErrors(newErrors);
    };
    validate();
  }, [nombre, email]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (Object.keys(errors).length === 0) {
      console.log(`Nombre: ${nombre}, Email: ${email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input
          type="text"
          value={nombre}
          onChange={(e) => setNombre(e.target.value)}
        />
        {errors.nombre && <div>{errors.nombre}</div>}
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email && <div>{errors.email}</div>}
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
};

export default FormularioValidacionTiempoReal;