Loading
Fundamentos de React(14 Lecciones)
Solución

Componentes Controlados

Aquí encontrarás la solución final a los 3 objetivos mencionados en el README.md

  1. Define el evento onSubmit para el form.
  2. Define los manejadores de eventos para el input y para el select.
  3. Actualiza el método onSubmit para que no refresque la página.

El elemento form puede lanzar el evento onSubmit cuando su contenido es enviado. Es posible capturar ese evento con React y ejecutar una función arbitraria.

Esta es tu primer acercamiento a como React maneja el estado de un component por medio del hook useState. Este hook es una simple función que recibe un valor y que retorna una tupla.

Esta tupla esta constituida por dos valores, el primero, el valor actual del estado, y el segundo es una función que te permite actualizar el estado.

En React, cada vez que el estado se actualiza el componente se re-renderizará modificando así la interfaz desplegada.

En este caso, se utilizan dos useState para manejar el estado de los elementos de formulario existentes en la interfaz, para así utilizarlos en la función onSubmit

Este elemento form emite el evento onSubmit cuando el único botón es clickeado ya que dicho botón está definido como submit.


Este ejercicio extra te muestra que useState no sólo acepta valores sencillos, si no también puedes utilizar estructuras de datos más complejas como un objeto.

El objeto en este caso se utilizará para mantener el estado de cada uno de los elementos del formulario.

Tamnbién actualizarás el formulario para mantener 3 elementos de formulario cada uno con su propio nombre name. Este atributo name se usará dentro de la única función que maneja los cambios de los elementos del formualario: handleChange.

La función handleChange es ejecutada cada vez que uno de los elementos cambia. Esta función obtiene el nombre y el valor de dicho elemento y lo utiliza para formar el nuevo estado.

useState puede recibir una función tipo callback. Esta función recibe como parámetro el estado previo y retornará el siguiente estado. Usarás esta idea para poder actualizar el estado sólo en el elemento que lanzó el evento

Transcripción

Como siempre, para nuestras soluciones comenzaremos abriendo el archivo index.html en donde tendremos un script base, que nos presenta un componente app, que tiene varios comentarios para guiarte en el camino de resolver estos componentes controlados. Lo que tenemos aquí son dos estados, uno para manejar el input y uno para manejar un select, cuyo valor por defecto es un Sting vacío.

También tenemos una función llamada handleInput y una función llamada handleSelect, un método onSubmit y un componente de formulario. Lo primero que nos dice el ejercicio 1 es definir el evento onSubmit, para eso simplemente agregaremos la prop onSubmit y le pasaremos la función correspondiente llamada onSubmit.

Ahora dice, dentro del mismo ejercicio 1, define los manejadores de eventos para este input y el select. Este input debe recibir dos props extra, el manejador de eventos y el estado asociado. El manejador de eventos del input será onChange y llamaremos a handleInput y el valor de este input será el estado que llamamos inputState. Lo mismo para el select, tenemos onChange, handleSelect y el valor será selectState.

Ahora debemos definir lo que hará el manejador de eventos del input, lo que queremos lograr es que cuando cambien los valores del input se actualice este estado y useState nos retorno una función actualizadora llamada en este caso setInputState, por lo tanto cada vez que este método sea llamado cuando el input cambia, llamaremos a setInputState eventTargetValue. Lo mismo para el select, setSelectState y hay un typo aquí, eventTargetValue.

Finalmente tenemos que actualizar el método onSubmit para que no refresque la página y eso lo hacemos con eventPreventDefault y ahora ya podemos ver en consola los valores que hemos seleccionado, guardamos y como siempre en una terminal iniciamos nuestra elección con npmRomDev, elegimos en la elección número 11 y visitamos localhost 3000, mostraremos la consola y tenemos.

Cuando cambiamos el valor del input, nuevo valor de input, está actualizándose este estado, eso lo podemos ver simplemente al hacer un console.logInputState, miramos la consola y podemos ver lo que se está escribiendo en el input. Al seleccionar la opción, se ejecuta setSelectState y al hacer onSubmit se ejecutará este console.log. Si cambiamos la opción que elegida y enviamos nuevamente, tenemos los ejercicios realizados, lo que hicimos aquí fue manejar el evento onSubmit del formulario controlados mediante React utilizando los valores de estado gracias al hook useState.

Para el crédito de esta se nos pide crear un nuevo input, para eso copiaremos simplemente este input de aquí, lo creamos acá y nos dice que utilicemos un solo estado y ojalá una sola función de manejo, para eso crearemos una sola función que llamaremos HandleChange y lo utilizaremos en los tres controladores, para poder identificar los elementos utilizaremos una propia llamada Name, a este elemento lo llamaremos input2, a este select y a este input1. Ahora, nuestro método HandleChange tendrá que verse así, donde Name y Value vienen desde el objeto EventTarget. Ahora, como podemos guardar estos valores, Value, provenientes de nuestros inputs, en el estado, crearemos un nuevo estado llamado formState y un manejador de estado setFormState, utilizando React useState, pero en este caso será un objeto y que usaremos los mismos nombres de nuestra propName, input1, select, input2.

Ahora, cuando queramos actualizar el estado, simplemente llamaremos a setFormState y utilizaremos una forma funcional de la actualización de estado, es decir, que recibe una función cuyo parámetro es el valor previo y ahora simplemente retornaremos un objeto con todos los valores previos del estado y además el nuevo valor que estamos actualizando.

Aquí Name es el identificador proveniente de estas props que usa el mismo nombre que nuestros atributos del objeto State, por lo tanto, cuando se actualiza el estado, se retorna el valor previo y se sobrescribe cualquiera sea Name, input1, select o input2 con el nuevo valor. Podemos probar esto simplemente al mostrar en la consola formState, sólo nos queda actualizar el valor que está siendo utilizado aquí, por formStateInput1, formStateSelect y formStateInput2, así cada uno de nuestros elementos de formulario está asociado con cada uno de los valores de nuestro estado. Esto lo podemos eliminar para claridad, guardamos y vemos input1, opción 3, lo enviamos y podemos ver en consola lo que hemos seleccionado. ¡Suscríbete al canal!