javascript — React — Модальный с подтверждением удаления из карты массива

Реакция — модальная с подтверждением удаления из карты массива

Я строю приложение, показывающее списки элементов в массиве, используя карту es6. Каждый элемент в массиве содержит текст и кнопку «удалить», и, очевидно, кнопка «удалить» удалит элемент из списка в массиве на основе определенного идентификатора. Это вызвано диспетчеризацией редуктора внутри функции, связанной с и contextAPI.

Вот основной синтаксис, который мне удалось …

 import React, { useState, useContext} from "react"; //context import { ListsContext } from "./listsContext"; function Lists() { const { items, dispatch } = useContext(ListsContext); return ( {amp}lt;div{amp}gt; {amp}lt;h1{amp}gt;Lists{amp}lt;/h1{amp}gt; {items.length ? ( items.map(item ={amp}gt; ( {amp}lt;div{amp}gt; {amp}lt;ListTag key={item.id} item={item} remove={() ={amp}gt; dispatch({ type: "REMOVE", id: item.id });} /{amp}gt; {amp}lt;/div{amp}gt; )) ) : ( {amp}lt;p{amp}gt; No Categories, Insert a category {amp}lt;/p{amp}gt; )} {amp}lt;/div{amp}gt; ); } function ListTag({ item, edit, confirm }) { return ( {amp}lt;div className="list-tag"{amp}gt; {amp}lt;div className="list-info"{amp}gt; {amp}lt;p{amp}gt;{item.description}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="config-btn"{amp}gt; {amp}lt;button onClick={remove}{amp}gt;Remove{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } export default Lists; 

Просто чтобы подчеркнуть, синтаксис выше просто удалит элемент сразу из массива после нажатия на кнопку «удалить». Тем не менее, моя цель состоит в том, чтобы иметь модальное всплывающее модальное окно с подтверждением об удалении с сообщением после нажатия на кнопку «удалить», чтобы Что-то вроде этого … Модальное подтверждение # 1 — codesandbox или Модальное подтверждение №2 Крисом Гейрманом — codesandbox посмотреть больше Обсуждение Stackoverflow ,

К сожалению, пример со ссылками не использует реакционные хуки, редукторы или contextAPI. Итак, я попробовал сам и подошел очень близко к идеальному выводу. Модал сделал всплывающее окно с подтверждением сообщения об удалении двумя кнопками внизу (удалить и отменить) после нажатия на кнопку удаления из массива. К сожалению, он не удаляет нужный элемент или, другими словами, удаляет определенный элемент по идентификатору. Например, допустим, в массиве 4 элемента. Если я захочу удалить первый элемент, который находится сверху массива («Массив один»), это приведет к удалению элементов внизу («Массив четыре»). Чтобы лучше понять, посмотрите на пример внутри моего кода и ящика .

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector