美丽的拖放——传递可拖动数据的onDropEnd

Question

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

基本上我需要一种自定义属性，出现在 DragDropContext 事件中的可拖动元素上。类似于：

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

- Jordan

---

我有同样的问题。你找到了传递有效负载的方法吗？ - Webfreaks

很遗憾，我不得不从这些ID中创建一个哈希映射，每个ID都是“bank”对象内部键值对的键。它包含了我所需的数据。在拖放结束时，我使用传递的ID从哈希映射中选择键并从那里获取数据。 - Jordan

这个问题有更新吗？你找到除了哈希表以外的答案了吗？ - Murtaza Hussain

Answer 1

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

如果我误解了您的问题，请原谅，但在您的onDragEnd中，在将状态设置为重新排序列表数据之前，您是否可以执行以下操作？

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

    // ...
  }

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

- David Kerr