Componentes controlados vs. componentes no controlados - Tutorial de React.js

Exploremos ahora el concepto de un componente controlado y un componente no controlado. Cuando hablamos de controlado y no controlado, quiere decir que los componentes tienen la capacidad de controlarse a sí mismos o relegar esa posibilidad hacia el componente padre. Vamos a comenzar examinando esta aplicación donde yo tengo un componente, acá, específicamente llamado ComponenteB, donde tengo un botón. Veamos cómo se ve esta aplicación, por ahora, donde tenemos un botón acá que dice Buscar Destino. Por ahora, al hacer clic en este botón, no ocurre nada. En el caso de un componente que no sea controlado, debería manejar esta acción por sí mismo. Así que vamos a ir al ComponenteB. Y en este componente, por ejemplo, yo voy a crear una constante que se va a llamar manejarClick. Vamos a crear acá un método utilizando la sintaxis de JavaScript para hacer una función, una raw function, y, para mantener este ejemplo simple, solamente vamos a hacer un alert donde nos dice que se hizo clic en este botón. Ahora, para vincular este evento, vamos a venir acá, a el botón, y vamos a llamar a el evento onClick y llamamos a manejarClick. Veamos el resultado y, en este caso, al hacer clic sobre este botón, vamos a tener una confirmación de que lo hemos presionado. Este botón se maneja por sí mismo y es un componente no controlado. Ahora, ¿cómo hacemos para que este componente sea un componente controlado? O sea, que la información o estado de este componente se administre desde el componente padre. Para eso, primero vamos a eliminar este método, así que yo voy a hacer un Control X, lo voy a cortar, vamos a Guardar y voy a venir acá a la aplicación. Estamos dentro de el componente padre, en el cual se encuentra este componente llamado ComponenteB. Vamos entonces a incluir aquí el método con el cual vamos a manejar la información o los procesos que se encuentran dentro de este componente. Vamos a ponerle acá «Click en componente padre». Listo. Ahora, ¿cómo hacemos para administrar un clic que ocurrió dentro de un componente? Venimos acá, al componente, y vamos a agregarle una propiedad. Vamos a llamar una propiedad que se va a llamar onClick. La vamos a tomar y vamos a reemplazar lo que antes era el método que teníamos. Lo que va a ocurrir es que, ahora, vamos a venir a la aplicación, vamos a tomar esa propiedad llamada onClick y, en este caso, vamos a asignarle el método manejarClick. Estamos tomando control sobre el evento Click y le estamos enviando este método para que se ejecute y se llame desde el componente hijo. Veamos entonces el resultado. Encontramos que estamos haciendo clic en el componente padre y lo estamos administrando desde acá. Ahora, este componente dejó de ser un componente no controlado a ser un componente controlado. En este punto, nosotros vamos a poder administrar los eventos que ocurren dentro de este componente y poder manejar sus procesos, información o estado. De esta forma, podemos centralizar la lógica de nuestras aplicaciones dentro de el componente padre y así administrar diferentes componentes que no van a manejar ningún tipo de lógica, simplemente van a ser una capa de presentación.