漂亮的 dnd - 在DropEnd 上传递可拖动数据

Question

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

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

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

Answer 1

从您的示例来看，您似乎正在尝试访问数组中的某个项目作为所需的有效负载。cmps 数组中的单个 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