react-smooth-dnd 获取payload

React Smooth DnD 是一个 React 库，用于实现平滑拖拽效果。如果你想获取拖拽元素的 payload，可以使用 `onDragBegin` 回调函数。

例如，你可以在拖拽开始时通过 `onDragBegin` 回调函数获取拖拽元素的 payload，如下所示：

import { useDrag } from 'react-smooth-dnd';

function MyDraggableComponent(props) {
  const { data } = props;

  const onDragBegin = () => {
    return data; // 返回拖拽元素的 payload
  };

  const { ref } = useDrag({
    payload: data,
    onDragBegin
  });

  return (
    <div ref={ref}>
      {data}
    </div>
  );
}

在上面的例子中，我们将 `data` 作为拖拽元素的 payload，并在 `onDragBegin` 回调函数中返回它。当用户开始拖拽时，React Smooth DnD 将调用 `onDragBegin` 回调函数，并将返回的 payload 传递给拖拽事件处理程序。你可以在拖拽事件处理程序中获取 payload，并根据需要进行操作。

相关问题

react-smooth-dnd 中onDrop dragResult中payload怎么获取

在 `react-smooth-dnd` 中，`DragResult` 对象包含有关拖放操作的信息。`DragResult` 由 `onDrop` 回调函数返回。

要获取 `payload`，可以从 `DragResult` 对象的 `payload` 属性中获取。例如：

import { DragResult } from 'react-smooth-dnd';

function handleDrop(dropResult: DropResult, dragResult: DragResult) {
  const payload = dragResult.payload;
  console.log('Payload:', payload);
}

在上面的代码中，`handleDrop` 函数接收 `dragResult` 对象并从中获取 `payload` 属性。然后，可以使用 `payload` 对象中的数据执行任何必要的操作。

react-smooth-dnd怎么使用onDragStart设置payload

React Smooth DnD 是一个 React 拖放库，它可以让你轻松地实现拖放功能。

要设置 payload，需要在 onDragStart 回调函数中使用 `setPayload` 方法。以下是一个示例：

import React from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-smooth-dnd';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onDragStart = this.onDragStart.bind(this);
  }

  onDragStart(payload, source) {
    // 设置 payload
    payload.myData = 'hello world';
  }

  render() {
    return (
      <DragDropContext>
        <Droppable>
          {(droppableProvided, droppableSnapshot) => (
            <div ref={droppableProvided.innerRef}>
              <Draggable onDragStart={this.onDragStart}>
                {(draggableProvided, draggableSnapshot) => (
                  <div ref={draggableProvided.innerRef}>
                    {/* 渲染拖动元素 */}
                  </div>
                )}
              </Draggable>
              {droppableProvided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

在 `onDragStart` 回调函数中，我们可以通过修改传入的 `payload` 对象来设置拖动时携带的数据。在这个例子中，我们将 `myData` 属性设置为 `'hello world'`。

当拖动元素时，可以使用 `onDrop` 回调函数中的 `payload` 参数来访问设置的数据。

希望这可以帮助到你！