Добавить обработчики событий и обновить состояние

  • 5 мин

Состояние хранения в основном компоненте нашего приложения (App) позволяет считывать текущие значения всех важных свойств. Нам не нужно взаимодействовать с каждым компонентом. Мы также можем централизировать события, обеспечивая изменение данных только в одном расположении.

Сценарий

Мы хотим разрешить пользователям приложения касаться элемента в списке ингредиентов после его завершения. Мы помечаем элемент как prepared в состоянии. Этот параметр будет отражен в приложении. При изменении значений компонент обнаруживает обновления и повторно вычисляет их по мере необходимости.

Добавление метода для событий щелчка

  1. Откройте файл App.jsx.

  2. Создайте прослушиватель событий с именем ingredientClick. Добавьте его к комментарию, который содержит текст TODO: Create ingredientClick event listener.

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

    Логика начинается с создания копии recipe с помощью оператора распространения. Затем мы извлекаем обновлённые ingredient с помощью index. Мы меняем значение preparedна противоположное. Наконец, мы заменяем объект recipe в состоянии с помощью setRecipe.

  3. Добавьте IngredientList, компонент, который отображает ингредиенты рецепта. Для этого добавьте следующий код после комментария, который гласит, TODO: Pass ingredients and event listener to IngredientList.

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

    Обратите внимание, что мы можем передать функцию ingredientClick, как передаем любое другое свойство компоненту.

Обновите IngredientList для использования прослушивателя событий

В React свойства (или реквизиты) могут быть любым типом JavaScript, включая функции. Таким образом, мы можем настроить обработчик событий в качестве свойства. Эта настройка позволяет централизировать обработку событий.

Давайте обновим IngredientList, чтобы использовать созданную ранее функцию ingredientClick:

  1. Откройте файл IngredientList.jsx. Обратите внимание на существующий компонент. Мы будем использовать этот компонент, чтобы показать, как использовать события.

  2. Под комментарием TODO: Add onClick event добавьте следующий JSX.

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

    Обратите внимание, что можно передать параметр в функцию prop onClick.

    Заметка

    Нет определенной причины, по которой мы использовали имя onClick для propsкомпонента. Это было просто имя, которое мы выбрали. Он был передан ранее из файла App.jsx.

Проверка страницы

  1. Сохраните все файлы.
  2. Вернитесь в браузер и обновите страницу. Если выбрать ингредиенты, состояние линии должно измениться. Он изменяется, потому что свойство prepared обновляется.