Hinzufügen von Ereignishandlern und Ändern des Zustands

  • 5 Minuten

Das Speichern des Zustands in der Kernkomponente Ihrer Anwendung (App) ermöglicht es Ihnen, die aktuellen Werte aller wichtigen Eigenschaften zu lesen. Sie müssen nicht mit jeder Komponente interagieren. Außerdem können Sie Ereignisse zentralisieren, wodurch sichergestellt wird, dass die Daten nur an einem Speicherort geändert werden.

Szenario

Sie möchten es Benutzern der Anwendung ermöglichen, auf ein Element in der Zutatenliste zu tippen, um es als vorbereitet zu markieren. Dieses Element wird im Zustand als prepared (vorbereitet) gekennzeichnet. Diese Einstellung wird in der gesamten Anwendung genutzt. Wenn die Werte geändert werden, erkennt die Komponente die Änderungen und wertet diese bei Bedarf neu aus.

Hinzufügen der Methode für Click-Ereignisse

  1. Öffnen Sie die Datei App.jsx.

  2. Erstellen Sie einen Ereignislistener namens ingredientClick. Fügen Sie ihn unter dem Kommentar TODO: Create ingredientClick event listener hinzu.

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

    Die Logik beginnt damit, mithilfe des Spread-Operators eine Kopie von recipe zu erstellen. Dann wird der geänderte ingredient-Wert mit index abgerufen. Dann kehren Sie den Wert von prepared um. Schließlich ersetzen Sie das recipe-Objekt im Zustand mithilfe von setRecipe.

  3. Fügen Sie IngredientList hinzu. Dabei handelt es sich um eine Komponente, die die Zutaten eines Rezepts anzeigt. Fügen Sie hierzu den folgenden Code nach dem Kommentar TODO: Pass ingredients and event listener to IngredientList hinzu.

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

    Beachten Sie, dass Sie die Funktion ingredientClick nun wie jede andere Eigenschaft an eine Komponente übergeben können.

Ändern von IngredientList zum Verwenden eines Ereignislisteners

In React können Eigenschaften (bzw. Props) jeden beliebigen JavaScript-Typ aufweisen, einschließlich Funktionen. Sie können also auch einen Ereignishandler als Eigenschaft einrichten. Dieses Setup ermöglicht es Ihnen, die Ereignisbehandlung zu zentralisieren.

Als Nächstes ändern Sie IngredientList, um die zuvor erstellte Funktion ingredientClick zu verwenden:

  1. Öffnen Sie die Datei IngredientList.jsx. Beachten Sie die vorhandene Komponente. Anhand dieser Komponente wird veranschaulicht, wie Sie Ereignisse verwenden.

  2. Fügen Sie den folgenden JSX-Code unter dem Kommentar TODO: Add onClick event hinzu.

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

    Beachten Sie, dass Sie einen Parameter an die onClick-Eigenschaftsfunktion übergeben können.

    Hinweis

    Es gibt keinen besonderen Grund dafür, dass hier der Name onClick für die props-Werte der Komponente verwendet wird. Dieser Name wurde lediglich für dieses Modul ausgewählt. Er wurde zuvor von der Datei App.jsx weitergegeben.

Testen der Seite

  1. Speichern Sie alle Dateien.
  2. Kehren Sie zum Browser zurück, und aktualisieren Sie die Seite. Wenn Sie die Zutaten auswählen, sollte der Zustand ändern (durchgestrichen). Der Zustand ändert sich, weil die Eigenschaft prepared geändert wird.