✏️ Formularios en React: crear, controlar y validar entradas

✏️ Formularios en React: crear, controlar y validar entradas

En React, los formularios se gestionan mediante formularios controlados, donde cada input tiene su valor sincronizado con el state del componente. Esto permite:

• Obtener los valores de los inputs en tiempo real.
• Aplicar validaciones antes de enviar los datos.
• Manejar múltiples campos de forma organizada.

---

1️⃣ Formulario controlado básico

Creamos un input simple donde React controla el valor:

function App() {
  const [nombre, setNombre] = React.useState("");

  const handleChange = (e) => setNombre(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`El nombre ingresado es: ${nombre}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Nombre:</label>
      <input type="text" value={nombre} onChange={handleChange} />
      <button type="submit">Enviar</button>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Nombre:

---

2️⃣ Formulario con múltiples campos

Para manejar varios inputs, podemos usar un objeto en el estado. Esto permite actualizar cualquier campo de forma dinámica:

function App() {
  const [formData, setFormData] = React.useState({ nombre: "", email: "" });

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

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

  return (
    <form onSubmit={handleSubmit}>
      <label>Nombre:</label>
      <input name="nombre" type="text" value={formData.nombre} onChange={handleChange} />

      <label>Email:</label>
      <input name="email" type="email" value={formData.email} onChange={handleChange} />

      <button type="submit">Enviar</button>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Nombre: Email:

---

3️⃣ Validación básica de campos

Podemos verificar los valores antes de enviar el formulario y mostrar mensajes de error al usuario:

function App() {
  const [email, setEmail] = React.useState("");
  const [error, setError] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Por favor ingresa un email válido.");
    } else {
      setError("");
      alert(`Email enviado: ${email}`);
    }
  };

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

      {error && <p style={{color: "red"}}>{error}</p>}
    </form>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Email:

Por favor ingresa un email válido.

✅ Con esta técnica, el usuario recibe feedback inmediato, mejorando la experiencia y evitando datos incorrectos.

---

4️⃣ Resumen de buenas prácticas

• Mantener los inputs sincronizados con el state.
• Usar un único estado para múltiples campos cuando sea posible.
• Implementar validaciones básicas para evitar errores en el envío.
• Mostrar mensajes de error claros y visibles al usuario.

← Volver al índice