Я только что получил массу удовольствия, добавив эту небольшую функцию в свое приложение React DinoFinder2020, которое было моим последним проектом для Flatiron School.

Я никогда не был в восторге от этого приложения. Хотя это был мой последний проект, я немного поторопился с ним, чтобы закончить вовремя, и он так и не стал таким отточенным, как мне бы хотелось. Это графическая вики для каталогизации доисторических животных. Но это забавная идея, и я действительно хотел, чтобы она выглядела хорошо, поэтому за последние несколько недель я внес некоторые косметические изменения.

Когда я погуглил «добавить подтверждение удаления, чтобы реагировать на приложение», ничего, что действительно соответствовало бы моей потребности или четко объясняло, насколько это просто, не появилось. Я начал следовать инструкциям в одном из руководств, но их вариант использования был настолько сложнее моего, что на самом деле не имел никакого смысла. Так что я сделал несколько шагов назад и начал сначала, а потом понял, насколько это невероятно просто, просто используя React-Bootstrap и передавая некоторые реквизиты.

Поэтому я создал новый файл компонента DeleteConfirm.js в папке src\components. Этот компонент будет моим всплывающим окном для подтверждения, действительно ли вы хотите удалить запись. React-bootstrap имеет модальный компонент, который очень хорошо подходит для этой цели. Итак, вы захотите добавить свой импорт в верхнюю часть вашего нового компонента следующим образом:

import React from 'react';
import { Modal, Button } from "react-bootstrap";

У меня есть третий импорт, deleteButton, но мы вернемся к нему чуть позже. После того, как вы закончите импорт, вам нужно спроектировать модальное окно. В документах react-bootstrap это очень хорошо объясняется. Вы даже можете просто скопировать и вставить их код примера, хотя вы будете вносить в него некоторые изменения, начиная с первых нескольких строк:

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

Это хуки, и их, вероятно, лучше размещать в родительском компоненте. Почему? Ну, для меня это было потому, что кнопка, которая фактически запускала модальное окно, была частью другого компонента, и этой кнопке нужен доступ к ним. Поэтому я сделал компонент DeleteConfirm дочерним по отношению к DinosaurCard.

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

import { useState } from "react";

Итак, я сделал это и передал моему новому ребенку некоторые реквизиты:

<DeleteConfirm 
showModal={show} 
handleClose = {handleClose} 
handleDelete = {props.handleDelete} 
dinosaur={props.dinosaur} 
handleDelete = {props.handleDelete} 
/>

Вы узнаете первые три из более раннего фрагмента кода — теперь они являются частью состояния DinosaurCard и передаются Modal в качестве реквизита. Предполагая, что вы скопировали пример из react-bootstrap, вам нужно будет сообщить модальному модулю, что теперь это свойства, поэтому вместо:

<Modal show={show} onHide={handleClose}>

Теперь у вас будет:

<Modal show={props.showModal} onHide={props.handleClose}>

И так далее для каждого другого экземпляра show и handleClose. Не забудьте поместить новый компонент в оператор return родительского компонента.

Когда все это будет сделано, теперь вы сможете щелкнуть кнопку в родительском компоненте и вызвать дочерний модальный компонент точно так, как это показано в примере с реакцией-загрузкой. Вот что я имею в виду под простотой — я буквально просто использовал пример кода и разбил его на два компонента, чтобы они могли взаимодействовать друг с другом. Но… это все, что у нас есть сейчас, это модальное окно, которое ничего не делает. Как заставить его действительно удалить запись? Вот тут-то и появляется свойство handleDelete. Эта функция была в моем приложении до того, как я реализовал это модальное окно, это функция, которая физически удаляет запись из базы данных. У меня это было в моем компоненте DinosaurContainer более высокого порядка, и там я его оставил. Первоначально я передал его в DinosaurCard, а затем снова в DeleteButton, функциональный компонент, который делает только одну вещь — удаляет запись. Спорно, если вам действительно нужен компонент для этого, он может быть просто частью родительского компонента DinosaurCard. Но мне нравится сохранять гибкость, поэтому я сделал это отдельным компонентом. И этот компонент по-прежнему делал то, что мне было нужно, запускал функцию handleDelete и удалял запись. Поэтому вместо того, чтобы использовать этот компонент (который удалял запись сразу без предупреждения) в DinosaurCard, я поместил его в DeleteConfirm.

Итак, кнопка удаления на DinosaurCard теперь вызывает модальное окно, которое спрашивает вас, уверены ли вы, что хотите удалить. Затем модальное окно (DeleteConfirm) представляет вам исходный компонент кнопки удаления, который вы можете щелкнуть, чтобы подтвердить, что хотите его удалить.

По сути, я переназначил свой первоначальный компонент кнопки удаления и изменил кнопку удаления на карточке, чтобы вызвать модальное окно вместо немедленного удаления. Очень просто!

Я знаю, что это превратилось в разглагольствования по конкретному проекту, поэтому я попытаюсь обобщить это ниже:

  1. Создайте новую ветку git (необязательно, но рекомендуется)
  2. Создайте новый функциональный компонент. Скопируйте и вставьте пример кода из живой демонстрации на этой странице в свой новый компонент.
  3. Вырежьте из компонента весь код, связанный с локальным состоянием, и вставьте его в любой компонент, который будет отображать начальную кнопку удаления (кнопку, которая запускает модальное окно). Не забудьте импортировать useState, если это функциональный компонент.
  4. Замените исходную начальную кнопку удаления простой кнопкой, которая запускает только модальное окно. Убедитесь, что это onClick = {handleShow}. Но сохраните код оригинальной кнопки, он понадобится вам через пару шагов.
  5. Добавьте свой новый компонент с модальным в свой родительский компонент, передав как реквизиты show, handleClose и любые другие данные, которые понадобятся вашему модальному модулю. На этом этапе вы должны нажать кнопку удаления, и новый компонент появится во всплывающем окне.
  6. В этом руководстве предполагается, что у вас уже есть функция удаления. Возьмите любую кнопку, которую вы использовали для удаления записи раньше, и вставьте ее в новый модальный компонент. Я заменил кнопку «нажмите здесь, чтобы сохранить» из примера своим функциональным компонентом DeleteButton, но вы даже можете просто оставить его, изменить текст на «подтвердить удаление» и добавить фактическую функцию удаления в его onClick. Пока вы заставляете одну из кнопок в модальном окне запускать функцию удаления, вы в золоте.
  7. Зафиксируйте свой код и выполните слияние с мастером. Вот оно!

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

Спасибо за чтение и удачного кодирования!