Здравствуйте и добро пожаловать в еще одну историю, которая поможет вам понять, что такое React и как вы можете использовать его для создания красивых веб-приложений. В предыдущей главе мы провели некоторый рефакторинг и описали, что такое компонент props. В этом разделе мы воспользуемся ими, чтобы добавить в приложение функцию удаления.
Пока наше приложение предоставляет пользователю возможность добавлять блюда в список, но он не может их удалить. Представьте, что наш пользователь XYZ добавит в список «бекон с мороженым», а затем решит: «Знаете, сегодня я буду есть здоровую пищу». Так что да, мы обязательно должны предоставить эту функциональность нашему приложению ради здоровья наших пользователей.
Сначала нам нужно расширить компонент MealPlanItem с помощью кнопки, которая запускает удаление. И это все. Добавить кнопку в компонент очень просто.
Теперь нам нужно добавить к этой кнопке действие onClick. Мы уже сделали что-то подобное, так что проблем быть не должно. Однако есть одна проблема, с которой мы должны столкнуться. Когда мы нажимаем кнопку, мы хотим внести изменения в состояние MealPlan компонента, но на самом деле у нас нет к нему доступа. Внутри MealPlanItem у нас есть доступ только к состоянию MealPlanItem. Ну, это звучит жестко. Но что, если я скажу вам, что мы можем изменить состояние MealPlan компонента, не имея к нему доступа. Что ж, мы действительно можем. И это будет выглядеть вот так.
Так будет выглядеть компонент MealPlanItem. Идея в том, что MealPlanItem на самом деле не знает, как изменить состояние. Он просто знает, что вызовет функцию handleDelete при нажатии кнопки. Теперь нам просто нужно добавить эту функцию и передать ее MealPlanItem в качестве свойства. Функция удаления еды из нашего состояния будет выглядеть так.
Теперь мы просто хотим передать эту функцию MealPlanItem. Что ж, мы уже должны знать, как это сделать. Однако есть одна вещь, на которую следует обратить внимание. Мы не можем
<MealPlanItem handleDelete={this.removeMeal(meal)} meal={meal} />
потому что таким образом мы не передаем функцию в свойства props, а фактически сразу вызываем ее. Поэтому вместо этого мы хотим передать функцию, которая будет выглядеть так:
() => this.removeMeal(meal)
а затем наша окончательная форма MealPlan компонента…
MealPlan компонент умеет удалять еду из состояния. MealPlanItem - это пустышка, которая знает, что должна вызывать функцию при нажатии кнопки. Когда MealPlan компонент отображает MealPlanItem компонентов, он передает каждому MealPlanItem функцию. Эта функция удалит данное блюдо из списка блюд. И теперь наш пользователь может легко удалить «бекон с мороженым» из списка блюд и заменить его более полезным для здоровья вариантом.
Подводя итог тому, что мы сделали… Мы использовали свойства компонента для обновления состояния компонента вне самого компонента. В следующей главе мы рассмотрим наше приложение и исправим в нем некоторые проблемы.
Хорошо… спасибо за внимание. Если вам понравилась история, дайте знать всему миру, хлопнув в ладоши. Если вы не читали предыдущие рассказы этой серии, обязательно посмотрите их здесь. Если у вас есть комментарии, не стесняйтесь спрашивать в разделе комментариев. С радостью отвечу на любые ваши вопросы. Я сейчас ухожу. Оставайтесь с нами на выбранной вами частоте. Бернард… вон!
