Часть 13.

Давайте продолжим и добавим функцию удаления этих элементов. Поэтому для этого мне нужно изменить AppointmentInfo.js и добавить метод, который позаботится об этом. всякий раз, когда кто-то нажимает на этот элемент, я буду выполнять здесь выражение.

Это создаст стрелочную функцию, которая вызывает этот новый метод, который я собираюсь создать, onDeleteAppointment, и он будет передавать идентификатор встречи.

Поэтому иногда вы создаете вещи, которые живут в разных компонентах. Так, например, когда мы выполняли переключение, родительскому компоненту не нужно было знать о включении и выключении чего-либо внутри компонента, но иногда вы действительно хотите общаться с родительским компонентом.

В этом случае мы собираемся изменить сами данные. Таким образом, родительский компонент будет управлять всеми этими данными, и нам нужно будет передать их.

Теперь это означает, что нам нужно будет поместить его в качестве реквизита, чтобы он знал, что нужно отправить обратно родительскому компоненту, и давайте продолжим и сохраним это.

а затем мы перейдем к родительскому компоненту, и вот место, где мы вызываем список встреч, и что мы сделаем, так это продолжим и передадим или, в данном случае, получим это в методе AppointmentInfo и еще раз , это будет выражение.

Теперь это будет немного сложно. Мы могли бы создать отдельную функцию для обработки этого, но она достаточно короткая, чтобы мы могли позаботиться об этом здесь. Поэтому всякий раз, когда это событие запускается, мы получим идентификатор встречи, а затем создадим стрелочную функцию.

Это будет использовать наш метод списка назначенных встреч. Это часть государственного управления. Итак, когда вы создаете useState, вы создаете этот метод, называемый набором списка встреч, и это то, что мы здесь используем, и что мы сделаем, так это возьмем текущий список встреч, а затем воспользуемся методом фильтрации JavaScript для удаления любых элементов. которые совпадают с идентификатором, который мы получили.

Таким образом, мы получим это во временную переменную с именем assign, а затем убедимся, что идентификатор встречи совпадает с тем, который мы получали всякий раз, когда кто-то нажимал на этот элемент.

Хорошо, давай проверим, работает ли это. Итак, если мы посмотрим на наш список, мы сможем щелкнуть любой из них, и он удалит данные из нашего списка.

App.js

AppointmentInfo.js

Больше контента на plainenglish.io