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

我认为您的问题是因为有一个小错误。在Draggable元素中，您设置了draggable = {card.id}

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

实际上，它应该是draggableId = {card.id}。

我简单的react-dnd无法正常工作-拖动项目会导致整个列表消失

1 个答案: