Inputs controlados frente a no controlados (introducción)
Comprenda la diferencia entre inputs controlados (el valor está vinculado al estado) y no controlados (el DOM gestiona el valor).
Inputs controlados frente a no controlados (introducción) es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
Descripción general
Objetivo: compare los campos de entrada controlados y no controlados. Los controlados utilizan el estado de React como fuente de verdad; los no controlados dejan esa responsabilidad al DOM.
Campos de entrada controlados
Campos de entrada controlados: el valor está vinculado al estado y se actualiza mediante onChange. React siempre conoce el valor más reciente.
Demo: campo de entrada controlado
Este campo de entrada está controlado: el valor proviene del estado y se actualiza con cada cambio.
<div id="root"></div>
Campos de entrada no controlados
Campos de entrada no controlados: el DOM conserva su propio valor; puede leerlo mediante refs solo cuando sea necesario.
Demo: campo de entrada no controlado
Aquí el campo de entrada es no controlado: React no administra el valor; lo leemos mediante una ref al hacer clic en el botón.
<div id="root"></div>
Consejos y consideraciones
Consejos:
- Controlados = predecibles; el estado de React controla la interfaz.
- No controlados = más sencillos, pero ofrecen menos control.
- Se prefieren los controlados para los formularios.
Comprobación de campos controlados
Repaso
Repaso: los campos de entrada controlados se vinculan al estado de React para ofrecer fiabilidad. Los no controlados permiten que el DOM administre los valores. Elija campos controlados para la mayoría de los formularios.
Preguntas frecuentes
¿La lección «Inputs controlados frente a no controlados (introducción)» es gratis?
Sí — el texto completo de «Inputs controlados frente a no controlados (introducción)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Inputs controlados frente a no controlados (introducción)»?
Comprenda la diferencia entre inputs controlados (el valor está vinculado al estado) y no controlados (el DOM gestiona el valor). Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Inputs controlados frente a no controlados (introducción)»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de useState y actualizaciones correctas
- Gestión de eventos: onClick y onChange
- Inputs controlados frente a no controlados (introducción)