我的简单 react-dnd 不起作用 - 拖动一个项目会导致整个列表消失

Question

我正在尝试使用 react-beautiful-dnd 库让这个 react-dnd 代码工作。

我不确定，但出于某种原因，当你开始拖动一个项目时，我的 2 个列表就消失了。

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

谁能看出我做错了什么？

Answer 1

我认为你的问题是因为有点 mistake.In Draggable 元素，你设置了 draggable = {card.id}

<Draggable key={card.id} draggable={card.id} index={index}>
      ...
</Draggable>

其实应该是draggableId = {card.id}.

我的简单 react-dnd 不起作用 - 拖动一个项目会导致整个列表消失

My simple react-dnd is not working - dragging an item causes the entire list to disappear

reactjs

react-dnd