Incorporación de controladores de eventos y actualización del estado

  • 5 minutos

Almacenar el estado en el componente principal de la aplicación (App) nos permite leer los valores actuales de todas las propiedades importantes. No necesitamos interactuar con cada componente. También podemos centralizar eventos, asegurándose de que los datos se modifiquen en solo una ubicación.

Escenario

Queremos permitir que los usuarios de la aplicación pulsen en un elemento de la lista de ingredientes cuando lo completen. En el estado, marcaremos el elemento como prepared. Esta configuración se reflejará en la aplicación. Cuando cambian los valores, el componente detecta las actualizaciones y vuelve a evaluarlas según sea necesario.

Incorporación del método para eventos de clic

  1. Abra el archivo App.jsx.

  2. Cree una escucha de eventos denominada ingredientClick. Agréguela debajo del comentario que lee, TODO: Create ingredientClick event listener.

    function ingredientClick(index) {
    const updatedRecipe = { ... recipe };
    updatedRecipe.ingredients[index].prepared = !updatedRecipe.ingredients[index].prepared;
    setRecipe(updatedRecipe);
}

    La lógica se inicia mediante la creación de una copia de recipe con el uso del operador spread. Después, recuperamos el elemento ingredient actualizado mediante el uso del elemento index. Invertimos el valor de prepared. Por último, reemplazamos el objeto recipe en el estado mediante el uso de setRecipe.

  3. Agregue IngredientList, un componente que muestra los ingredientes de una receta. Para ello, agregue el código siguiente después del comentario que lee, TODO: Pass ingredients and event listener to IngredientList.

    <IngredientList ingredients={recipe.ingredients} onClick={ ingredientClick } />

    Observe que podemos pasar la función ingredientClick tal y como pasaríamos cualquier otra propiedad a un componente.

Actualización de IngredientList para usar la escucha de eventos

En React, las propiedades (o props) pueden ser de cualquier tipo de JavaScript, incluidas las funciones. Por lo tanto, podemos configurar un controlador de eventos como propiedad. Esta configuración nos permite centralizar el control de eventos.

Vamos a actualizar IngredientList para usar la función ingredientClick que hemos creado anteriormente:

  1. Abra el archivo IngredientList.jsx. Observe el componente existente. Usaremos este componente para mostrar cómo se usan los eventos.

  2. Debajo del comentario TODO: Add onClick event, agregue el JSX siguiente.

    onClick={ () => props.onClick(index) }

    Observe que podemos pasar un parámetro a la función onClick de la propiedad.

    Nota:

    No hay ningún motivo concreto por el que hayamos usado el nombre onClick en el elemento props del componente. Simplemente ha sido el nombre que hemos elegido. Se ha pasado anteriormente desde el archivo App.jsx.

Prueba de la página

  1. Guarde todos los archivos.
  2. Regrese al explorador y actualice la página. Si selecciona los ingredientes, el estado de tachado debería cambiar. Cambia porque la propiedad prepared se está actualizando.