时间戳

首页 > 解决方案 > 美丽的 dnd - 传递可拖动数据 onDropEnd

reactjs - 美丽的 dnd - 传递可拖动数据 onDropEnd

问题描述

我的可拖动元素上有一些可用的数据。我想在 onDragEnd 上使用该数据，但我没有找到传递任何可拖动数据的方法，除了draggableId传递到resultonDragEnd 事件中的数据。

基本上我需要的是可拖动的某种自定义道具，它将显示在 DragDropContext 事件中。就像是：

<>
   {cmps.map(cmp => (
       <Draggable 
           key={cmp.name}
           draggableId={cmp.name}
           index={index}
           // this is what im missing
           payload={cmp}
           // -----------------------
        >
          <Cmp/>
        </Draggable>
    )}
</>

标签： reactjsdrag-and-dropdraggablereact-beautiful-dnd

解决方案

从您的示例看来，您正在尝试访问数组中的项目作为所需的有效负载。cmp 数组中的单个 cmp。

如果我误解了您的问题，请原谅我，但是在您设置状态以重新排序列表数据之前在您的 onDragEnd 中，您可以做这样的事情吗？

  onDragEnd(result) {
    // Access to data from list
    console.log(cmps[result.source.index]);

    // ...
  }

我分叉了一个沙箱，并添加了上面的控制台日志来说明： https ://codesandbox.io/s/vertical-list-forked-qiljq?file=/index.js

推荐阅读