Dodawanie programów obsługi zdarzeń i stanu aktualizacji

  • 5 min

Przechowywanie stanu w podstawowym składniku aplikacji (App) umożliwia odczytywanie bieżących wartości wszystkich ważnych właściwości. Nie musimy wchodzić w interakcje z każdym składnikiem. Możemy również scentralizować zdarzenia, zapewniając, że dane są modyfikowane tylko w jednej lokalizacji.

Scenariusz

Chcemy zezwolić użytkownikom aplikacji na naciśnięcie elementu na liście składników po jej zakończeniu. Oznaczymy element jako prepared w stanie . To ustawienie zostanie odzwierciedlone w całej aplikacji. Po zmianie wartości składnik wykrywa aktualizacje i ponowne oceny zgodnie z potrzebami.

Dodawanie metody dla zdarzeń kliknięcia

  1. Otwórz plik App.jsx.

  2. Utwórz odbiornik zdarzeń o nazwie ingredientClick. Dodaj go pod komentarzem, który odczytuje: TODO: Create ingredientClick event listener.

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

    Logika rozpoczyna się od utworzenia kopii recipe przy użyciu operatora spreadu. Następnie pobieramy aktualizację ingredient przy użyciu elementu index. Odwracamy wartość prepared. Na koniec zastępujemy recipe obiekt w stanie przy użyciu polecenia setRecipe.

  3. Dodaj IngredientListskładnik , który wyświetla składniki przepisu. Aby to zrobić, dodaj następujący kod po komentarzu, który odczytuje: TODO: Pass ingredients and event listener to IngredientList.

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

    Zwróć uwagę, ingredientClick że możemy przekazać funkcję, ponieważ przekażemy dowolną inną rekwizytę do składnika.

Aktualizowanie składnikaList do używania odbiornika zdarzeń

W rozwiązaniu React właściwości (lub rekwizyty) mogą być dowolnym typem języka JavaScript, w tym funkcjami. Możemy więc skonfigurować program obsługi zdarzeń jako prop. Ta konfiguracja umożliwia scentralizowanie obsługi zdarzeń.

Zaktualizujmy IngredientList , aby użyć utworzonej ingredientClick wcześniej funkcji:

  1. Otwórz plik IngredientList.jsx. Zwróć uwagę na istniejący składnik. Użyjemy tego składnika, aby pokazać, jak używać zdarzeń.

  2. Poniżej komentarza TODO: Add onClick event dodaj następujący kod JSX.

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

    Zwróć uwagę, że możemy przekazać parametr do funkcji prop onClick .

    Uwaga

    Nie ma konkretnego powodu, dla którego propsużyliśmy nazwy onClick składnika . To była tylko nazwa, która została wybrana. Przekazano go wcześniej z pliku App.jsx .

Testowanie strony

  1. Zapisz wszystkie pliki.
  2. Wróć do przeglądarki i odśwież stronę. W przypadku wybrania składników stan line-through powinien ulec zmianie. Zmienia się, ponieważ prepared właściwość jest aktualizowana.