reactjs - React DnD - 如何获取拖动项目的ID

Question

我如何在我的文件中控制台登录我有放置区域，我正在移动的节点的 ID(可拖动项目)。我相信我应该使用 monitor.getItem()，如 documentation 中指定的那样，但我不明白，

我的可拖动节点上有一个 ref={drag}，我的可放置节点上有一个 ref={drop}。

可拖动项:

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM' },
    collect: monitor => ({
      isDragging: !!monitor.isDragging()
    }),
    drag: () => {
      console.log('dragging')
    }
  })

拖放区

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log(monitor)
      // monitor only returns { type: 'TODO_ITEM' }
    }
  })

Answer 1

我解决了这个问题，方法是通过可拖动项目上的 Prop 将项目拉入，将其附加到监视器，然后在可放置区域拾取它。

可拖动项

export default function TodoItem ({ item }) {

  const [{ isDragging }, drag] = useDrag({
    item: { type: 'TODO_ITEM', itemID: item._id },
    collect: monitor => ({
      item: monitor.getItem(),
      isDragging: !!monitor.isDragging()
    })
  })

...

拖放区:

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: 'TODO_ITEM',
    collect: mon => ({
      isOver: !!mon.isOver(),
      canDrop: !!mon.canDrop()
    }),
    drop: monitor => {
      console.log('moving item:', monitor.itemID)
    }
  })