如何用react-dnd在拖拽开始时调用函数

要在拖拽开始时调用函数，可以使用 `DragSource` 中的 `beginDrag` 方法。这个方法会在拖拽开始时被调用，并返回一个对象，用于描述正在拖拽的数据。

你可以在 `beginDrag` 方法中调用你想要执行的函数，并将函数的返回值添加到拖拽数据中，以便在放置目标上使用。

以下是一个示例：

import { DragSource } from 'react-dnd';

const myDragSource = {
  beginDrag(props, monitor, component) {
    // 调用想要执行的函数
    const data = props.handleDragStart();

    // 将函数的返回值添加到拖拽数据中
    return { data };
  }
};

function MyComponent(props) {
  // 将 myDragSource 作为高阶组件使用
  const { connectDragSource } = props;
  return connectDragSource(
    <div>拖拽我</div>
  );
}

export default DragSource('myItemType', myDragSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
}))(MyComponent);

在上面的代码中，当用户开始拖拽 `MyComponent` 组件时，`myDragSource.beginDrag` 方法会被调用，并且调用 `props.handleDragStart()` 函数。函数的返回值会被添加到拖拽数据中，可以在放置目标上使用。

注意，`handleDragStart()` 函数需要在 `MyComponent` 组件的 props 中被定义。