Compensaciones, patrones con refs y valores predeterminados
Compare inputs controlados y no controlados, use refs para las lecturas y proporcione valores predeterminados razonables.
Compensaciones, patrones con refs y valores predeterminados es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 2. 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 2 lecciones en total.
Controlados frente a no controlados
Objetivo: Elija el estilo de entrada adecuado.
- Controlado: el valor está en el estado; se vuelve a renderizar cuando cambia
- No controlado: el DOM conserva el valor; léalo mediante ref cuando sea necesario
- Valores predeterminados: defaultValue, defaultChecked
Comparativa rápida
- Controlado: excelente para la validación en tiempo real, las máscaras y la sincronización de otros campos
- No controlado: menos renderizaciones; formularios sencillos que solo se leen al enviarlos
- Combine ambos: controlado para los campos clave y no controlado para los opcionales
Demostración: entrada controlada
Un campo controlado almacena value en el estado y se actualiza con cada cambio.
<div id="root"></div>
Demostración: no controlada con ref
Un campo no controlado utiliza el valor del DOM; léalo con un ref cuando sea necesario.
<div id="root"></div>
Valores predeterminados y cuándo controlar
Utilice defaultValue/defaultChecked para los valores iniciales de las entradas no controladas; pase a controlado cuando necesite reglas en tiempo real.
<div id="root"></div>
Consejos y errores frecuentes
- No combine value y defaultValue en la misma entrada
- Utilice refs para leer los valores no controlados
- Elija el modo controlado cuando la interfaz reaccione a cada pulsación
Comprobación: controlados frente a no controlados
Resumen
Resumen: Utilice el modo controlado para las reglas en tiempo real y el estado derivado; el no controlado, para lecturas sencillas que solo se realizan al enviar. Use ref para leer los valores y defaultValue para el contenido inicial.
Preguntas frecuentes
¿La lección «Compensaciones, patrones con refs y valores predeterminados» es gratis?
Sí — el texto completo de «Compensaciones, patrones con refs y valores predeterminados» 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 2 lecciones en total.
¿Qué aprenderé en «Compensaciones, patrones con refs y valores predeterminados»?
Compare inputs controlados y no controlados, use refs para las lecturas y proporcione valores predeterminados razonables. 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 1 de 2.
¿Cuánto tiempo toma la lección «Compensaciones, patrones con refs y valores predeterminados»?
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
- Compensaciones, patrones con refs y valores predeterminados
- Prop getters y State Reducer (introducción)