Principiantereact
Formularios Controlados
Gestiona formularios en React con componentes controlados, validacion y manejo de envio.
Componentes controlados vs. no controlados
En un componente controlado, React es la "fuente de verdad" del valor del input. El valor siempre refleja el estado. En uno no controlado, el DOM mantiene su propio estado (se usa
useRef para leerlo).Formulario controlado completo
Un formulario controlado utiliza
useState para rastrear el valor de cada input y onChange para actualizarlo.jsx
1function RegistroForm() {
2 const [datos, setDatos] = useState({ email: "", password: "" });
3 const [error, setError] = useState("");
4
5 const handleSubmit = (e) => {
6 e.preventDefault();
7 if (!datos.email || !datos.password) {
8 setError("Todos los campos son obligatorios");
9 return;
10 }
11 setError("");
12 console.log("Enviando:", datos);
13 };
14
15 return (
16 <form onSubmit={handleSubmit}>
17 {error && <p className="error">{error}</p>}
18 <input
19 type="email"
20 value={datos.email}
21 onChange={e => setDatos(d => ({ ...d, email: e.target.value }))}
22 placeholder="Email"
23 />
24 <input
25 type="password"
26 value={datos.password}
27 onChange={e => setDatos(d => ({ ...d, password: e.target.value }))}
28 placeholder="Password"
29 />
30 <button type="submit">Registrarse</button>
31 </form>
32 );
33}