📤 Cómo manejar el submit de formularios en React correctamente

📤 Cómo manejar el submit de formularios en React correctamente

En React, el manejo del submit de un formulario no es automático como en HTML tradicional. Debemos usar la propiedad onSubmit y evitar que el formulario recargue la página con event.preventDefault().

---

1️⃣ Formulario simple con submit

Un ejemplo básico donde capturamos el evento submit y mostramos los datos ingresados:

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

  const handleSubmit = (e) => {
    e.preventDefault(); // evita la recarga de la página
    alert(`El nombre ingresado es: ${nombre}`);
  };

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

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

Nombre:

---

2️⃣ Manejo de múltiples campos y submit

Para formularios con varios inputs, usamos un estado como objeto y manejamos el submit de forma centralizada:

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();
    console.log("Datos del formulario:", formData);
    alert(`Nombre: ${formData.nombre}, Email: ${formData.email}`);
  };

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

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

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

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

Nombre: Email:

---

3️⃣ Validación y submit

Podemos combinar la validación de campos con el manejo del submit para asegurar que los datos sean correctos antes de enviarlos:

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.

---

4️⃣ Buenas prácticas al manejar el submit

• ✅ Siempre usar event.preventDefault() para evitar recargas innecesarias.
• ✅ Mantener los inputs sincronizados con el state.
• ✅ Validar los datos antes de procesarlos.
• ✅ Usar un solo handleSubmit centralizado para formularios complejos.
• ✅ Mostrar feedback al usuario si los datos son incorrectos.

← Volver al índice