Guía para crear componentes de formularios en React

Guía de construcción de componentes de formularios en React

Construir formularios en React requiere una gestión de estado cuidadosa. Esta guía te muestra cómo construir un formulario de registro desde cero.

Aprenderás cuatro conceptos principales:

• Gestión de estado Almacena todos los campos del formulario en un único objeto de estado. Utiliza el hook useState para realizar el seguimiento de nombre, edad, correo electrónico y contraseña.

• Manejo de inputs Utiliza una sola función para gestionar todos los cambios de los inputs. Actualizas el estado extendiendo los datos anteriores y añadiendo el nuevo valor basándote en el nombre del input.

• Validación de formularios Comprueba si todos los campos contienen datos antes del envío. Muestra una alerta si algún campo está vacío.

• Soporte de teclado Añade un escuchador para la tecla Enter. Esto permite a los usuarios enviar el formulario sin tener que hacer clic en el botón.

Ejemplo 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 (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

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