Question

我正在从事一个涉及React DND ES6的项目。我想从最小的面板中拖动元素，并将其放在右侧的相应框中。

我通过从左侧面板拖动元素并将其实现到Array中来完成此操作。但是这里的问题是相同的项能够按如下方式添加到数组中。

我要这样做，如果项目已被拖动到特定的框，则从左侧面板再次拖动该项目并放入正确的框应该不起作用。在这种情况下，它应该显示警告框，例如“ Item _name”已被拖到“ box_name”。

我尝试通过在setBins方法之前添加以下代码来实现此目的。但是没有成功。

 if (!lastDroppedItem.includes(item)){  setBins(
         update(bins, {
          [index]: {
            lastDroppedItem: {
                          $push: [item],   
            },
          },
        })       
      )
    },
    [droppedBoxNames , bins],   )

请在以下代码和框中找到我的代码：-https://codesandbox.io/s/reactdndapp-2vz82

请提供帮助。谢谢。

Answer 1

您可以再拥有一个属性-每个存放所有已放置项目的垃圾箱droppedItems，例如：

{
  dname: 'BIN 1',
  accepts: [ItemTypes.BOOK, ItemTypes.BOTTLE, ItemTypes.FOOD],
  lastDroppedItem: {},
  droppedItems: [],
},

并检查该物品是否已在垃圾箱中：

function isBoxAlreadyInBin(bins, index, name) {
  const droppedItems = bins[index].droppedItems || [];
  return droppedItems.some(item => item.name === name);
}

const handleDrop = useCallback(
(index, item) => {
  const { name } = item;

  setDroppedBoxNames(
    update(droppedBoxNames, name ? { $push: [name] } : { $push: [] })
  );

  if (isBoxAlreadyInBin(bins, index, name)) {
    alert(`${name} already in bin ${index}`);
  } else {
    setBins(
      update(bins, {
        [index]: {
          lastDroppedItem: {
            $set: item
          },
          droppedItems: {
            $push: [item]
          }
        }
      })
    );
  }
},
[droppedBoxNames, bins]
);

希望这会有所帮助！

Answer 2

如果要删除的对象的实例首先存在于bin中，则需要进行搜索，然后再通过调用setBin方法对其进行更新，否则可以忽略或触发通知。

在这里，我使用了JavaScript数组find方法来检查垃圾箱中是否存在类似的对象。

if (!bins[index].lastDroppedItem.find(x => x.name === item.name)) {
    setBins(
        update(bins, {
            [index]: {
              lastDroppedItem: {
                $push: [item]
              }
            }
        })
    );
}

如果只有项在数组中不存在，如何拖放元素-React DND ES6

2 个答案: