问题标签 [react-dnd]

我不完全理解它，但显然不建议使用 findDOMNode()。

我正在尝试创建拖放组件，但我不确定我应该如何从组件变量访问 refs。这是我目前拥有的一个例子：

资源

编辑

这可能是由于我的组件既是拖放源又是目标，因为我可以让它在这个例子中工作，但不是这个。

我正在构建一个应用程序，该应用程序需要对项目表进行排序并根据它们的排序更改它们的 orderNumber。我安装并使用了一个名为 react-dnd 的库来处理排序/排序的功能，到目前为止它工作得很好。我遇到的问题是更新。当用户移动其中一项时，我需要向 api 发送 PUT 请求并更新其 orderNumber。昨晚工作得很好，这是我的代码。

ListItem（正在排序和更新的项目）：

包含这些项目的容器或列表：

它正在发出 PUT 请求，但它只移动一个对象就连续发出数百个请求。我不能为我的生活弄清楚为什么。这会严重滞后应用程序并使其无响应。我是否以正确的方式解决这个问题，如果是这样，解决方案是什么？

编辑＃1：今天醒来，应用程序运行良好。不幸的是，这正在生产中，所以在此之前我必须重新创建 800+ PUT 请求的错误并解决它。可能会为此提供赏金。

我的 React Web 应用程序上有两列。我想有一个可拖动的材料 ui 卡列表（在第一列中），我想将卡从一列拖到另一列。Material UI 目前不提供内置的卡片拖动功能。是否可以通过 react dnd 来做到这一点？如果是，那怎么办？

我有一个反应组件。我想在组件中使用 DragSource 和 Connect。

如何容纳单个组件的两条线，即 ExpandableCard

我正在尝试在我的反应项目中使用反应 DnD。在我的渲染方法中，我定义了一个名为 Populate 的变量，如下所示，它返回一个像这样的卡片列表

我返回的渲染方法看起来像这样

问题是当我尝试使用拖动时，会选择整个卡片列表进行拖动。我希望所有卡片都具有单独的拖动功能。

我所拥有的是一张表，我希望能够在其中拖放行的顺序并更改其父级。非常类似于这个剑道小部件。

我让放置操作自己工作，包括更改父级和排序，但我无法理解如何创建预览以向用户展示当他们放置时会发生什么。

据我所知，拖动预览是在拖动源中设置的componentDidMount，但我不确定如何使用目标中的悬停方法将图像连接到源中。

我有一个应该能够重新排序行和列的 html 表。

重新排序行非常简单，但重新排序列非常困难，因为列的单元格不共享相同的父元素。

如何使用 React 实现列拖动？

我正在构建一个组件，该组件允许用户通过拖放构建图形。有一个节点井，他们可以在其中拖出新节点，他们可以在画布周围拖动节点等。

现在，我需要允许他们通过从一个节点的输出拖动到下一个节点的输入端来创建边。严格来说，这不是拖放操作，因为可拖动对象保持不动，而是显示一条源自可拖动对象并填充在光标下的线，直到最终，当用户将鼠标悬停在活动目标上时释放，边缘完成。

拖放似乎可以完成我想要的几乎所有事情。它具有悬停信号，当符合条件的 Draggable 正在拖动时突出显示放置目标，等等。有两件事我不知道该怎么做。一是完全停止可拖动的移动。我可以通过放置元素的两个副本来欺骗它，一个在另一个下面，然后禁用拖动预览，但如果有一个简单的标志会更好。

另一个似乎更像是一个表演者。collect 函数不会在我拖动时连续触发事件（我知道，设计使然）。我需要一些能触发 onMouseMove 的东西来不断更新这条线。由于拖放确实做了一些我需要的东西，而且我已经承担了依赖它的大小成本，所以重用它会很棒。

到目前为止，我最好的想法是在 上安装一个 onMouseMove 处理程序beginDrag并清理线上，在 上endDrag建立任何新的边缘drop。不幸的是，我认为有些东西正在阻止 mousemove 事件的传播，因为即使我在开始拖动时确实在此处输入了 beginDrag，我的处理程序也不会触发。

我无法让 react-dnd 工作。具体来说，虽然我可以确认正确检测到拖动，但我的可放置目标没有检测到悬停或放置事件。我一直在遵循http://survivejs.com/react/implementing-kanban/drag-and-drop/上的示例来创建可拖动项目。我尝试使用相同示例和官方 repo中的官方示例的组合来创建 DropTarget 以接受可拖动。但是，我的 DropTarget 没有表明它正在检测可拖动对象。我下面的代码有多个调试器语句来指示是否正在到达代码，但它们都不是。我怀疑compose最后的电话可能是问题所在，但我在这里遵循 Dan Abramov 的示例. 只是为了增加问题，Chrome 开发工具中的 React 检查器让我在itemType拖动项目时看到状态变量的变化。但是，thecanDrop和isOverstate 变量都保持为假。我将不胜感激任何帮助以使其正常工作。

我目前正在为 react 中的文件上传和排序构建一个功能。

我使用了以下示例：

• https://gaearon.github.io/react-dnd/examples-chessboard-tutorial-app.html
• https://github.com/okonet/react-dropzone
• https://github.com/gaearon/react-dnd-html5-backend

一切正常，直到 eslint 告诉我不要在下面的存储库中的 js/componenets/File.jsx 中使用 findDOMNode。

https://github.com/GregHolmes/react-dnd-dropzone

当我尝试重新排序图像的位置时会发生这种情况。即将第二张图片拖到第一名。

经过搜索，我找到了一个有关如何解决此问题的示例。然而，这个例子是行不通的。这个例子是：React DnD：避免使用 findDOMNode

与他们的示例一样，我尝试了以下操作：

js/components/File.jsx:35

<div ref={node => this.node = node} style={{ ...style, opacity }}>

然后在同一个文件中，我取消注释第 62 行：

const rawComponent = component.getDecoratedComponentInstance();

并替换（第 71 行）：

const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();

与（第 70 行）：

const hoverBoundingRect = rawComponent.node.getBoundingClientRect();

然后我得到：

getDecoratedComponentInstance() is not a function

有谁知道我该如何解决这个问题？我为我的代码中的混乱道歉。我是新来的反应，并一直试图保持尽可能干净。

编辑

我以为我已经解决了以下问题。但是这样做意味着我无法将图像拖到另一个框。使用 DropTarget 切换 let exportFile = DragSource..... 给了我最初的函数调用不是函数的问题。

在我的 File.jsx 文件的底部。我有：

我将其替换为：