Entradas

¿Cómo funciona un formulario en React?

 Te lo explico muy claro y paso a paso , y lo integramos como una tercera página al ejemplo anterior con React Router. La idea será: Inicio → muestra la lista ( fakeApiData ) Contáctenos Agregar usuario → formulario para agregar datos a la lista ⚠️ Nota importante (concepto clave): Como fakeApiData no es una API real , los datos solo vivirán en memoria mientras la app esté abierta. Esto es perfecto para aprender formularios y estado . 1️⃣ ¿Cómo funciona un formulario en React? En React, un formulario se maneja con estado ( useState ) . Conceptos básicos Cada input tiene un valor controlado El valor vive en un useState onChange actualiza el estado onSubmit procesa los datos Ejemplo mental simple Input → escribe → onChange → useState → React renderiza 2️⃣ Vamos a mover fakeApiData al componente padre Para que Inicio y Agregar compartan los datos, el estado debe vivir en App.js . 3️⃣ App.js (estado global + rutas) App.js import { ...
Publicar un comentario
Leer más

Formularios en React para Principiantes

  Formularios en React para Principiantes Los formularios en React manejan los datos de forma especial porque React controla la interfaz. Hay dos formas principales:  controlados  y  no controlados . 1. Formularios Controlados (Recomendados) En los formularios controlados, React maneja el estado de cada campo del formulario. Ejemplo Básico: jsx import { useState } from 'react' ; function FormularioSimple ( ) { // Estado para almacenar el valor del input const [ nombre , setNombre ] = useState ( '' ) ; // Manejar el cambio en el input const manejarCambio = ( e ) => { setNombre ( e . target . value ) ; } ; // Manejar el envío del formulario const manejarEnvio = ( e ) => { e . preventDefault ( ) ; // Evita que la página se recargue alert ( ` Hola, ${ nombre } ! ` ) ; } ; return ( < form onSubmit = { manejarEnvio } > < label > Tu nombre: < input ...
Publicar un comentario
Leer más