4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast
Editar en Github

Qué son las entradas controladas o no controladas en React.js

Entradas en JavaScript Vanilla.js simple

Esta lección habla un poco más sobre cómo trabajar con entradas en react que sobre qué es una entrada controlada. Es mejor explicar las razones por las que las necesitamos y por qué las entradas controladas se consideran el mejor enfoque en las aplicaciones React.js.

Entradas en JavaScript Vanilla.js simple

Si quieres recuperar un valor de una entrada en JavaScript/HTML simple, puedes hacer algo como esto:

1// Suponiendo que tienes esta entrada con un ID=first_name: 2<input type="text" id="first_name" /> 3 4// En JavaScript puedes usar: 5const value = document.querySelector('#first_name').value;

Pero con React la solución no es tan simple; la única forma de mantener los datos que pueden cambiar con el tiempo dentro de los componentes de React es usando el famoso state (estado).

¿Qué es una entrada controlada?

Una entrada controlada es solo otra entrada con la diferencia de que su valor está sincronizado con el estado de un componente, algo como esto:

1const AnyComponent = () => { 2 const [ inputValue, setInputValue ] = useState(''); 3 4 return <input type="text" onChange={e => setInputValue(e.target.value)} value={inputValue} /> 5}

Cuando usas la propiedad de entrada onChange junto con la propiedad value, básicamente estás forzando el valor de la entrada a estar completamente sincronizado por dos vías con la variable de estado inputValue.

  1. Si se llama a la función onChange => se actualizará inputValue.
  2. Si la variable inputValue se actualiza => la entrada también cambiará su valor.

¿Por qué utilizar entradas controladas?

Una entrada controlada no es la única forma de acceder y/o actualizar el valor de una entrada, también puedes usar el hook useRef e intentar manipular la entrada de la manera tradicional, usando el DOM, pero a largo plazo, terminará siendo más complicado y más difícil de mantener que las entradas controladas.

Además, una entrada controlada te brinda muchos beneficios adicionales como acceso inmediato al valor de entrada para validaciones, una actualización instantánea de la entrada, etc.

Validando entradas en React con entradas controladas

Una vez que tu entrada controlada está lista, las validaciones son simples porque ahora tienes la variable inputValue a tu disposición. Por ejemplo, si deseas validar que la entrada no está vacía cuando se hace clic en un botón, puedes hacer algo como esto:

1const AnyComponent = () => { 2 const [ inputValue, setInputValue ] = useState(''); 3 4 const validateInput = () => { 5 if(inputValue === "") alert("The input cannot be empty"); 6 } 7 return <div> 8 <input type="text" onChange={e => setInputValue(e.target.value)} value={inputValue} /> 9 <button onClick={validateInput}>Click to validate empty</button> 10 </div>; 11}

Puedes ver un ejemplo en vivo aquí:

Clic para agrandar