使用 React 从 onDrop 回调中获取 'dropped' div答案

【问题标题】：Get the 'dropped' div from the onDrop callback using React使用 React 从 onDrop 回调中获取 'dropped' div
【发布时间】：2014-07-26 02:01:08
【问题描述】：

onDrop 事件在 React 组件中被触发，但由于它是一个合成事件，因此事件的参数似乎只包括被删除 div 的目的地，而不是被删除 div 本身。我需要引用被删除的 div。通过参数返回的只是这个对象：SyntheticDragEvent {dispatchConfig: Object, dispatchMarker: ".0.0", nativeEvent: MouseEvent, type: "drop", target: div.col-sm-3.drop-area…} 有谁知道检索源而不仅仅是目标的方法？

【问题讨论】：

不看代码我也不能肯定，但是你可以做的是在dragStart上setTransferData，你可以从原生事件中获取传输数据。给它一个合适的名称，例如 setData('myObject', dataGoesHere);您可以在另一端的 transferData 上调用 getData 。此外，请确保在可放置的 div 中为 dragenter 事件返回 false，以便它可以放置项目。

标签： javascript events draggable reactjs

【解决方案1】：

您可以使用nativeEvent 属性从任何SyntheticEvent 获取本机事件。从那里您应该能够访问正常事件中可以访问的任何内容。例如，使用SyntheticEvent.nativeEvent 可以让您访问.dataTransfer .currentTarget .target .relatedTarget 等等。SyntheticEvent.nativeEvent.target 是我认为您正在寻找的那个。

【讨论】：