React DnD - Как получить ID перетаскиваемого предмета

Question

Как я могу консоль войти в мой файл, где у меня есть область перетаскивания, идентификатор узла, который я перемещаю (перетаскиваемый элемент).Я полагаю, что должен использовать monitor.getItem(), как указано в документации , но я не понимаю,

У меня есть 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

Я решил это, потянув предмет через опоры на перетаскиваемый предмет, прикрепив его к монитору и подняв его в области опускания.

Перетаскиваемый предмет

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)
    }
  })