Используйте обещания, синглтоны и функции, чтобы упростить процесс

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

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

Вы можете увидеть пример по следующей ссылке.

Далее мы увидим, как составить список задач и как создать действие для их удаления:

Сначала создаем основной компонент

Затем мы добавим элементы в состояние

Добавить рендер

И, наконец, добавляем функцию удаления items

Все предыдущие шаги приведут нас к основным функциям для стирания элемента.

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

Первым делом создадим компонент

Этот базовый компонент покажет нам базовый диалог с двумя вариантами (ОК, Отмена).

Для этого мы добавим статическую функцию, которая помещает компонент в контейнер, отличный от основного рендера приложения (например, React Portal), и мы вернем ссылку.

Функция create создает div и добавляет его в тело документа, а затем возвращает ссылку на визуализацию React с визуализированным компонентом, чтобы иметь возможность взаимодействовать с ним позже.

Чтобы диалоговое окно отображалось, мы должны создать функцию, которая изменяет состояние isOpen на true и, кроме того, возвращает обещание, которое выполняется, когда пользователь принимает или отменяет действие.

Для этого мы должны отключить функцию resolve из обещания, чтобы ее можно было вызывать в обработчиках компонента:

Затем мы создаем экземпляр компонента в файле:

И, наконец, мы используем экземпляр в обработчике для удаления элемента, разрешая обещание с помощью async / await:

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

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

Вывод

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