Мой простой response-dnd не работает - перетаскивание элемента приводит к исчезновению всего списка
Я пытаюсь заставить этот код response-dnd работать с помощью библиотеки react-beautiful-dnd.
Я не уверен, но по какой-то причине мои 2 списка исчезают, когда вы начинаете перетаскивать элемент.
https://codesandbox.io/s/jvq5815nvy
return (
<DragDropContext onDragEnd = {this.onDragEnd}>
{board.lists.map((list, index) => (
<Droppable droppableId = {list.name}>
{(provided, snapshot) => (
<div
ref = {provided.innerRef}
style = {getListStyle(snapshot.isDraggingOver)}
>
{list.cards.map((card, index) => (
<Draggable key = {card.id} draggable = {card.id} index = {index}>
{(provided, snapshot) => (
<div
ref = {provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style = {getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{card.title}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
))}
</DragDropContext>
);
Кажется, что щелчок и перетаскивание элемента приводит к сбоям, хотя я, возможно, и был ключевым значением элемента, но я не вижу, что я делаю неправильно.
Разработчики, создавшие библиотеку, создали образец песочницы с рабочим кодом, который я попытался имитировать: я просто изменил пример песочницы для библиотеки.
https://codesandbox.io/s/ql08j35j3q
Кто-нибудь может увидеть, что я делаю не так?
@Jayavel Я не уверен, чем это отличается от этого примера, где каждый элемент перетаскивается через .map codeandbox.io/s/ql08j35j3q
Ответы 1
Я думаю, ваша проблема из-за небольшой ошибки. В элементе Draggable вы устанавливаете draggable = {card.id}
<Draggable key = {card.id} draggable = {card.id} index = {index}>
...
</Draggable>
На самом деле это должно быть draggableId = {card.id}.
Я предполагаю, что проблема заключается в Draggable, поскольку ваш рендеринг через .map, который отображает все элементы перетаскиваемыми, было бы лучше, если бы вы проверили это видео один раз для этого случая egghead.io/lessons/…