Aggiungere gestori di eventi e aggiornare lo stato

• 5 minuti

L'archiviazione dello stato nel componente di base dell'applicazione (App) permette di leggere i valori correnti di tutte le proprietà importanti. Non è necessario interagire con ogni componente. È anche possibile centralizzare gli eventi, assicurando che i dati vengano modificati in una sola posizione.

Scenario

Si vuole consentire agli utenti dell'applicazione di toccare un elemento nell'elenco degli ingredienti una volta preparato. L'elemento sarà contrassegnato come prepared nello stato. Questa impostazione si rifletterà nell'intera applicazione. Quando i valori cambiano, il componente rileva gli aggiornamenti e ripete la valutazione se necessario.

Aggiungere il metodo per gli eventi clic

1. Aprire il file App.jsx.

2. Creare un listener di eventi denominato ingredientClick. Aggiungerlo sotto il commento TODO: Create ingredientClick event listener.

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

   La logica inizia con la creazione di una copia di recipe mediante l'operatore spread. Si recupera quindi l'oggetto ingredient aggiornato usando index. Si inverte il valore di prepared. Infine, si sostituisce l'oggetto recipe nello stato usando setRecipe.

3. Aggiungere IngredientList, un componente che visualizza gli ingredienti di una ricetta. A tale scopo, aggiungere il codice seguente dopo il commento TODO: Pass ingredients and event listener to IngredientList.

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

   Si noti che è possibile passare la funzione ingredientClick allo stesso modo in cui si passa qualsiasi altra proprietà a un componente.

Aggiornare IngredientList per l'uso del listener di eventi

In React le proprietà possono essere qualsiasi tipo JavaScript, incluse le funzioni. È quindi possibile impostare un gestore di eventi come proprietà. Questa configurazione consente di centralizzare la gestione degli eventi.

Si aggiornerà ora IngredientList per usare la funzione ingredientClick creata in precedenza:

1. Aprire il file IngredientList.jsx. Si userà il componente presente nel file per illustrare come usare gli eventi.

2. Sotto il commento TODO: Add onClick event aggiungere il codice JSX seguente.

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

   Si noti che è possibile passare un parametro nella funzione onClick della proprietà.

   Nota

   Non esiste un motivo particolare per cui è stato usato il nome onClick nel componente props. È semplicemente un nome scelto fra tanti. È stato passato in precedenza dal file App.jsx.

Testare la pagina

1. Salvare tutti i file.
2. Tornare al browser e aggiornare la pagina. Se si selezionano gli ingredienti, lo stato dovrebbe cambiare. Cambia a causa dell'aggiornamento della proprietà prepared.