react中的可拖动组件未按预期工作
在React中，可拖动组件未按预期工作可能是由于以下几个原因导致的：
- 缺少必要的依赖：在使用可拖动组件之前，需要确保已安装并正确引入相关的依赖库。常见的可拖动组件库包括react-dnd、react-beautiful-dnd等。可以通过在项目中安装这些库来解决问题。
- 组件属性设置错误：可拖动组件通常需要设置一些属性来指定其拖动行为。例如，可能需要设置
draggable属性为true，以及指定拖动开始和结束时的回调函数。检查组件的属性设置，确保正确配置了相关属性。 - 错误的事件处理：可拖动组件通常会触发一些事件，例如拖动开始、拖动过程和拖动结束等。在事件处理函数中，可能存在错误的逻辑导致组件未按预期工作。检查事件处理函数的实现，确保逻辑正确。
- CSS样式问题：可拖动组件的样式可能会影响其拖动行为。例如，可能需要设置
position属性为absolute或fixed，以及指定拖动时的样式变化。检查组件的CSS样式，确保正确设置了相关属性。
对于可拖动组件未按预期工作的问题，可以尝试以下解决方案：
- 确保已正确安装并引入相关的依赖库，例如react-dnd或react-beautiful-dnd。
- 检查组件的属性设置，确保正确配置了相关属性，例如
draggable属性和事件处理函数。 - 检查事件处理函数的实现，确保逻辑正确，例如正确处理拖动开始、拖动过程和拖动结束等事件。
- 检查组件的CSS样式，确保正确设置了相关属性，例如
position属性和拖动时的样式变化。
腾讯云提供了一些相关的产品和服务，可以帮助开发者在云计算环境中构建和部署React应用。例如，腾讯云的云服务器（CVM）提供了可靠的计算资源，可以用来托管React应用。此外，腾讯云还提供了对象存储（COS）服务，用于存储React应用的静态资源。您可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
2回答
有冲突的两个拖放库
、、、、
我们都在使用react-sortable-hoc和react-dropzone，如果在单独的页面上，它们可以很好地工作。但是，当在同一页面上使用react-sortable-hoc时，react-dropzone不能正常工作，因为我注意到react-dropzone也是由从react-sortable-hoc拖动事件触发的。(例如，我不能再在其他项目之间拖动一个项目。)
我尝试将e.preventDefault()和e.stopPropagation()添加到react-sortable-hoc的onSortStart事件中，但react-dropzone仍在被触发。
我们还能用什么方法让他们
浏览 4提问于2020-06-20得票数 2
回答已采纳
1回答
功能组件数组未按预期追加属性内容
、、、、
我想向<Feeds/>组件添加一个<TokenFeed/>功能组件数组。问题是，当我这样做时，将一些文本传递给我的<App/>的onClick()事件不能按预期工作。当单击数组版本的<TokenFeed/>时，它将替换我的<input/>文本，而不是附加到文本的末尾。 相反，当我在<Feeds/>的return中添加<TokenFeed/>的副本并单击按钮时，它可以正常工作。 我怎么才能解决这个问题呢？ Demo import React, { useState } from "react";
浏览 45提问于2021-11-17得票数 0
回答已采纳
1回答
我一直在学习React，在过去的一个月里一直在做一个项目，但我开始意识到我的组件不一定是“可重用的”。我知道可重用性是React的一个重要概念，但我不知道如何简化我的组件。 例如，我有一个使用react-beautiful dnd的待办事项应用程序，它包含三个组件: DragDropContext、Droppable和Draggable。整个应用程序现在包含四个组件:主应用程序组件，它将数据传递给三个react-beautiful dnd组件。到目前为止，这是非常简单和可重用的。 现在，我想为每个任务添加一个信息按钮，当用户单击该按钮时，将显示第五个组件Info。为此，我需要向可拖动组件添加
浏览 19提问于2020-06-21得票数 2
1回答
我想在我的react应用程序中使用。问题是我想用拖放的方式移动芯片。material ui不支持此功能。有没有解决办法/扩展以获得可拖动的芯片？<！
如果没有其他方法，我会换到另一个图书馆。有人认识吗？谢谢
//编辑-好的解决方案
您可以使用使任何组件都可拖动。
浏览 0提问于2019-04-23得票数 5
2回答
将拖动句柄设置为仅为列表项标记
、、、、
我正在使用React DnD创建嵌套列表。我知道库不支持这一点，但我已经看到了很多解决办法，我的用例相对简单(不能在父列表之间拖动子列表元素；子列表元素只能在各自的子列表中拖动)。
问题如下：试图从嵌套列表中拖动元素，有时会拖动父列表元素。(我刚刚发布了一篇长篇文章，记录了我的问题)。
我还没有得到任何回应，所以我开始思考其他可能解决问题的方法。我意识到一种解决方案是只选择每个列表元素中可以单击拖动的特定区域，并确保这个区域不会在父/嵌套列表之间重叠。
考虑到这是可能的，我只需将{...provided.dragHandleProps}添加到要充当拖动句柄的元素中。
但是，我的嵌套列表是使用我
浏览 6提问于2021-10-04得票数 0
回答已采纳
3回答
我正在从事一个react dnd项目，我正在遵循。一切工作正常，但我无法在拖动时滚动。
我需要一个滚动条，当我拖动一个项目时，已经到达了最后一个可放置源，然后它会自动滚动，并允许我将项目放在那里。
如果有人知道如何做到这一点，那么请与我分享。我会非常感激的。
浏览 0提问于2016-09-15得票数 1
我一直在尝试避免重新渲染子组件(InputBox组件)，如果道具没有改变，但下面的代码没有像预期的那样工作。我怎么才能修复它？如何避免重新呈现此名称相同但未对memoizedCallbacks进行记忆的InputBox组件 <InputBox name={"test"} handleCb={memoizedCallback} id="name" /> <body>
<div id="root"></div>
<script src="https://unpkg.com/r
浏览 17提问于2020-12-26得票数 0
2回答
我正在摸索AEM 6.2版本，努力创建一个可以拖到我的页面上的组件。我复制了一个现有的“工作”组件，并在CRXDE页面中更改了名称。结果是新组件在左侧组件面板中可见，但当我想要拖动它时，什么也没有发生？如何创建/复制可拖动的组件？
浏览 0提问于2016-11-28得票数 0
描述
当按下可按下组件的子组件(如图像)时，传递给onPress支柱的函数不会在android上执行。在iOS上工作就像预期的那样。
React本地版本：
0.63.2
复制步骤
打开一个新的博览小吃，创建一个可按的组件，它是其他组件(A文本或图像)的父级，将onPress道具设置为调用具有视觉效果的函数。(类似于警报)切换到android选项卡，并单击“点击播放”
预期结果
函数被调用，并触发效果(警报)。
零食、代码示例、屏幕截图或链接到存储库：
代码示例：
import React from 'react';
import { View, Pressable, Imag
浏览 0提问于2021-02-09得票数 4
回答已采纳
我用react-beautiful dnd练习的简单应用程序不能像预期的那样工作。列表项不会拖动，而只是创建一个相邻的占位符。我读到draggable上的页边距有意想不到的后果，但摆脱引导样式仍然不能改善问题。下面是应用程序：https://codesandbox.io/s/53j0kvnw14
浏览 36提问于2019-01-29得票数 0
1回答
我有一个带有state的组件，该组件由于某些异步操作而得到更新。这个组件是一些拖放UI的一部分，当用户开始拖动操作时，我需要在应用程序中负责显示拖动元素的单独部分中呈现这个组件。
问题是，如果我在其他地方重新呈现一个组件，即使我传递了相同的道具，它仍然必须在异步操作中运行，然后它才能呈现来自拖动源的相同状态的组件。
我认为我可以通过执行类似于引用拖动源的组件的这个-呈现方法来使其工作：
render() {
return (
<DragSourceComponent ref={this.dragSourceComponentRef} />
)
}
以
浏览 2提问于2018-11-08得票数 4
我有使用react-google-maps的react应用程序。我希望它有固定的标记在地图的中心时，用户移动地图。但在我的例子中，只要发生拖动事件，map就会立即刷新。 父组件： import React, { useState, useEffect } from 'react';
import Map from './Map';
export default function Parent() {
const [mapCenter, setMapCenter] = useState(undefined);
const [markerPosition
浏览 14提问于2020-04-08得票数 3
我有一个问题，需要一些帮助。所以我有多个touchables或按钮，当按下时会自动向下移动。我使用相同的方法来移动所有按钮，并使用状态变量来区分哪个按钮被按下。这就是问题所在，如果我按下第一个按钮，它会正常工作，但当我按下第二个按钮时，它只会重置位置，但不会移动。我发现的另一件事是，如果我从最后一个按钮到第一个按钮开始操作，它会按预期工作。我已经发布了我的代码。任何帮助都是非常感谢的。 import React from 'react';
import {
View,
TouchableOpacity,
Animated,
Easing,
} from
浏览 20提问于2019-02-26得票数 0
回答已采纳
对于React和Ionic，我还是个新手。我试图完成的是创建一条“受保护的路由”。我创建了一个名为AuthContext的简单上下文
import { createContext, Dispatch } from 'react';
/**
* Context interface for AuthAuthentication/Authorization
*
* @property isAuthenticated
* @property dispatch
*
* @interface
*/
interface AuthDefaultContext {
isA
浏览 0提问于2020-02-27得票数 4
它的预期功能是，它只删除所单击的一个目标，但出于某种奇怪的原因，它决定onPress删除列出的所有目标。 我正在学习这个教程，https://www.youtube.com/watch?v=qSRrxpdMpVc，我在2:44:45左右卡住了。如果其他人已经完成了本教程，或者可以看到我的问题，请解释一下，我将非常感激。:) 程序 import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
Button,
TextInput,
ScrollView,
FlatLi
浏览 14提问于2019-12-11得票数 0
根据react文档，将ref传递给子组件的正确方法如下：
import React from 'react';
const Input = React.forwardRef((props, ref) => {
React.useEffect(() => {
ref.current.focus();
}, []);
return <input type="text" ref={ref} />;
});
export default function App() {
const inputRef = React.c
浏览 6提问于2021-11-29得票数 0
1回答
我有这个自定义钩子来从firebase获取当前用户：
import React, { Component, useEffect, useState } from 'react';
import { auth } from "../firebase/auth-service"
const useFirebaseAuthentication = (firebase) => {
const [authUser, setAuthUser] = useState(null);
try {
auth.onAuthStateChang
浏览 2提问于2021-01-13得票数 0
我有一个网格，当我左键点击，按住并移动光标(即:拖动鼠标)时，方框变成红色(我基本上想绘制网格)。我有下面的代码。当我拖动鼠标的时候。MouseDragged方法被正确调用，但是只有一个框变成红色，并且在我拖动之后什么也没有发生(尽管该方法仍然被调用)。有什么想法吗？希望我说得够清楚了。谢谢
public static class DragListener implements MouseMotionListener
{
@Override
public void mouseDragged(MouseEvent me) {
JPanel cur
浏览 0提问于2012-01-28得票数 0
1回答
不一致图像在反应中的移动行为
、、、、
我遇到了一个问题，当制作一个文本编辑器支持基于图像的标签。有必要在文本中自由地移动这些标签，因为这一问题使之变得不切实际。
基本上，当我开始拖动一个图像，然后把它放到想要的位置时，可能会出现两个结果之一: A)它按预期工作；B)图像被拖到句子的末尾/开头。您可以在附加的gif中看到行为。
我使用react和类型记录组合来创建页面，并将quill插入到组件中。
// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';
import { Tex
浏览 3提问于2017-02-03得票数 2
我希望有多个独立的商店，它们的行为实际上是平等的。因此，我有一个作为私有组件字段的存储。问题是，这是不是一种糟糕的做法。
我将一个store作为私有属性添加到一个实例中，如下所示：
export class ContainerWithLocalStore extends React.Component<Props> {
transientStore: TransientStore;
constructor(props: Props) {
super(props);
this.transientStore = new Transie
浏览 2提问于2019-10-26得票数 1
看起来React DnD希望可拖动/可拖放的项成为兄弟项才能正常工作。如果其中一项属于另一个父项，我会得到“期望找到一个有效的目标”。只要drag over事件激发(当交换应该触发时)。 我从他们的文档中修改了一个例子，以防有人想尝试一下:坏掉的例子：https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx 调整位于底部。请注意，第一个卡片项目是在另一个div中与其余项目分开呈现的。 要触发错误，只需将第一个项目拖放到另一个项目中。请注意，如果您拖放任何其他项目，它们将正常工作。 原始示例：https://co
浏览 53提问于2020-07-29得票数 3
1回答
如何在启用滚动时进行拖放
、、、
我在JavaScript工作，遇到了一个问题，需要专家的帮助。这是我的场景，我有一个div，里面有两个div，我希望我的外部div是可拖动的，而我的一个内部div有一个滚动选项
<div id = "par" class "ui-draggable" style="position: relative; height: 200px; width: 540px;">
<div width="440" height="182" style="float: left;">
浏览 0提问于2012-07-20得票数 0
回答已采纳
1回答
我正在开发我的React项目中的一个功能，用户在div的左右边框上盘旋，它可能包含一个图像或文本或其他东西，一个调整大小的按钮出现在边框上，当鼠标拖动时，会调整div宽度和它的内容。
我尝试了CSS属性调整大小，但它只允许我从一个角落拖动。我想通过拖动边框来调整div宽度的大小。
.container{
background-color: black;
width: 400px;
height: 400px;
}
.resizable{
background-color: lightgray;
width: 300px;
height: 400px;
resize
浏览 23提问于2022-11-16得票数 -1
回答已采纳
2回答
我有一个组件，当它可见时，我希望每10秒查询一次API。当组件关闭/不可见时，我希望停止轮询。 我的问题是，即使在组件被隐藏之后，轮询仍在继续。无论我在做什么，我的代码都无法识别新更新的状态变量。 const DisplayState = Object.freeze({
DisplayGroupNamesForSelection: 0,
DisplayLogStream: 1
});
export default function LogStream({ isOpen }) {
const [currentState, setCurrentState] = useS
浏览 7提问于2020-10-28得票数 0
回答已采纳
我正在尝试打印使用Apache POI生成的excel，但手动分页符无法按预期工作。我设置了以下内容 sheet.setAutobreaks(false);
sheet.setRowBreak(50);
sheet.setColumnBreak(20); 但正如您在下面看到的，自动分页符(虚线)和手动分页符都即将到来，用户必须手动拖动虚线才能打印出正确的内容 ?
浏览 208提问于2020-08-25得票数 0
1回答
这更像是一个一般性的设计问题，而不是关于一段代码的具体问题。让我做一个概要：
想象一幅包含3个或更多点的多条线的画布。这些点中的每一个都有一个圆形对象作为可拖动的句柄。用户可以移动拖动手柄，该操作更新仅包含这3个坐标的反应性上下文。新的上下文触发画布的重绘，用新的坐标更新多边形线和拖动句柄，同时在拖动时执行诸如“向轴抓取”和“向最近的其他向量”检查。
我只使用功能组件(，React.FC)，并在需要时使用钩子共享状态。
我在拖动处理程序上使用了requestAnimationFrame()，以尽可能接近客户端的最大刷新速率来取消更新。目标是保持在60英尺。
问题：
在react中，附加在舞台上
浏览 3提问于2020-03-10得票数 0
回答已采纳
3回答
我想实现拖动组件(漂亮的dnd)，以便用户可以交换它们。但对于这一点，每个组件都必须有一个id，据我所知。但我不知道该怎么做
import React from 'react';
import CardWeather from '../cardWeather/CardWeather';
import WeatherMap from '../cardWeatherMap/WeatherMap';
import Forecast from '../forecast/Forecast';
import WeatherGrapth fro
浏览 9提问于2022-01-16得票数 1
回答已采纳
1回答
最近我开始在React-Native上工作，之前我曾经在React上工作过，因为我是新手，我正在努力处理许多需求，例如在两个列表之间拖放实际上在使用HTML/React时非常简单，但在React-Native中它是如此复杂，没有库来支持这个功能，我从来没有遇到过这样的困难，有没有一种方法可以在React-Native中使用任何React库，或者是否有人可以帮助我使用React-Native库，在那里我可以使用可拖动的Flatlist在彼此之间拖动，以及可以选择将其移动到另一个列表。
在过去的几周里，我一直在为这个需求而苦苦挣扎，我已经用谷歌搜索了很多。
也尝试了一些React-Native库，
浏览 15提问于2019-11-24得票数 0
回答已采纳
1回答
我正在使用，并遵循网站上的第一个示例：
function MyDropzone() {
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
Hello
</div>
);
}
我想创建一个包装类，如下所示：
function MyDropzone() {
const
浏览 0提问于2021-06-06得票数 0
1回答
我正在使用react呈现一个图表，我想在该图表的标题中添加一个元素。不幸的是，我使用的是一个共享的图表组件，主要修改该组件将很难证明是合理的。 我尝试过使用refs；然而，我遇到了困难，无法弄清楚如何将虚拟dom元素作为子元素进行实际附加。 特定图表类： class ChartWithInfo extends React.Component {
constructor(props){
super(props);
this.chartWrapperElement = React.createRef();
}
compo
浏览 20提问于2019-10-04得票数 0
3回答
使用react-native，我在父App中创建子组件，并将它们的位置提供给父App中的数组this.state.objLocation。
我可以在渲染后直接将初始位置数据放入数组中，但是因为我的子组件是可拖动的，所以每次它们在拖动时重新渲染时，都会向数组中添加一个新的position对象。
我想要避免这种情况，我认为在构造函数中创建this.state = { firstRender: true }，然后在第一次呈现后使用componentDidMount = () => { this.setState({ firstRender: false }) }将允许我创建一个'gat
浏览 0提问于2017-11-16得票数 0
我正在使用React DnD来处理React应用程序中的拖放。我正在使用。在这个实现中，我使用了一个自定义的拖动预览。在拖动时，我通过将其最大高度动画设置为0来隐藏“被拖动”的元素。当用户拖动时，将显示自定义拖动预览。如果用户将元素放在不允许的区域中，则“被拖动”项将动画恢复到其原始高度。这很好。
当项目被拖放时，我发送一个redux操作，对项目列表进行重新排序，并将之前拖动的元素放到新位置。
但是，在DOM更新项目并在其新位置设置项目动画之前，有一段时间被拖动的项目在其当前位置闪烁。
最大高度动画由isDragging为true时添加和删除的CSS类控制。
我已经搜索了React DnD文档
浏览 38提问于2017-03-04得票数 0
回答已采纳
1回答
如何一次拖动多个对象的反应？
、、、、
我想一次拖动多个对象(保留它们在DOM中的位置)。因此，如果对象重叠，则重叠顺序应保持不变。
我试图使用或来实现这一点--这是谷歌最流行的拖放框架。
在react-dnd中，建议的解决方案是跟踪选定的项目并实现自定义。但是，这样DOM中的位置就会丢失，因此视觉上的对象将以不同的方式相互重叠。
我还没发现该怎么做才能反应迟钝。也许有一种方法可以使用某种draggableGroup属性来指示一组可拖放的对象？以前有没有人实施过这样的计划？
下面是我关于反应拖拽的实验：。
可以选择多个对象，但只有一个是可拖动的。
const canvasSize = {width:"600"
浏览 0提问于2020-04-27得票数 1
我有一个问题，在古腾堡编辑器内的自定义块内的拖放项目。有可能吗？
我尝试使用拖放道具和拖放组件。毫无办法。
可拖属性：
<div draggable></div>
或
<div draggable="true"></div>
或者来自的例子
Devtools显示可拖动属性(draggable="true")，但我仍然不能在编辑器中拖动任何项目。我遗漏了什么？谢谢。
浏览 1提问于2019-05-09得票数 3
我试图为用户提供创建、拖动和连接多个节点的能力，但我仍然不理解angular如何渲染这个节点或组件的生命周期和其他节点，所以即使经过大量研究，我仍然无法解决下面列出的问题。 基本上，我试图用一个简单的超文本标记语言page来实现我已经达到的效果，但是这次使用Angular和angular的here并不能让我轻松实现。首先，我在努力使新的div可拖动，我设法做到了，但现在端点似乎无法连接，不知道为什么或如何修复它。即使在查看完文档后，我仍然不明白AfterViewInit、ComponentFactoryResolver、parentInjector、resolveComponentFacto
浏览 42提问于2019-07-02得票数 1
回答已采纳
我正在构建一个reactjs应用程序，我正在使用一个名为react的库-为我的下拉列表选择，这是可搜索的。但我面临的问题是，选择中的选项是，当使用箭头键时，NVDA屏幕阅读器不会读出。由于某些原因，也无法将焦点设置在下拉列表上。
我通过官方文件试过了，但到目前为止没有任何进展。
我正在使用的库：React-select
守则：
import React, { Component, Fragment } from "react";
import Select from "react-select";
export const flavourOptions =
浏览 0提问于2019-08-23得票数 6
1回答
我已经使用react原生地图air在我的本地应用程序中呈现一个谷歌地图。地图和标记会显示出来，但是标记不能拖动。这是我的剧本
<View style={Style.mapContainer}>
<GeoLocation onSetInitalPos={this.onSetInitialPosition}
onSetLastPos={this.onSetLastPosition}/>
<MapView style={Style.map} region={this.sta
浏览 1提问于2017-05-04得票数 2
回答已采纳
1回答
动态响应本机更改响应程序
、、、
我正在使用react-native进行安卓开发。我有一个视图，如果用户做长按，我想显示一个动画视图，可以拖动。我可以使用PanResponder实现这一点，它工作得很好。
但我想要做的是，当用户做长按时，用户应该能够继续相同的触摸/按下，并拖动新显示的Animated.View。
如果你熟悉谷歌驱动应用，它也有类似的功能。当用户长时间按下列表中的任何项时，它将显示可拖放的项。用户可以立即拖动该项目。
我想，如果我能够在Responder开始显示之后动态地将它更改为可拖动的项，那么这个方法就可以工作了。
问题是
react本机提供了一种动态更改响应程序的方法吗？
到目前为止我尝试过的
浏览 1提问于2016-07-05得票数 10
回答已采纳
2回答
我想知道我将如何拖/滑向左，以揭示反应本机上的时间戳。我在react中使用了一个平面列表，我有时间戳数据，但是我不知道如何在轻微的拖动下呈现时间戳。对于如何做到这一点，任何人都有详细的想法。我已经包含了当前实现和iMessage幻灯片/拖动的图像。这一特性也出现在Instagram上(至少ios版本)。我应该补充说，我不是在尝试做拖放功能，更像是一个解决方案，查看当前幻灯片/拖动视图中没有的内容。
浏览 10提问于2022-07-23得票数 0
回答已采纳
Instagram有一个非常酷的互动，你可以点击和保持，也就是longPress，在图片和一个交互弹出出现。一旦出现，您就可以将手指拖动到一个动作按钮上，然后移除手指，应用该操作并关闭弹出按钮。
在这里，它正在行动。
和，如果你需要一个更近的观察。
在我的应用程序中，我的点击和保持弹出工作，但手指拖动继续控制底层视图。
如何将手指交互转移到弹出窗口？
如何使按钮响应手指拖放？
浏览 2提问于2017-06-16得票数 7
我尝试在我的应用程序中实现一个功能，允许用户重置所有他拖来拖去的组件，以便重置到其原始位置。 我假设此功能存在于react-draggable中，因为这个已关闭并已发布的问题：“允许重置拖动位置”(https://github.com/idanen/react-draggable/issues/7)。但是，我在文档(https://www.npmjs.com/package/react-draggable)中没有找到任何提示。 在stackoverflow中有一个具有相同内容的问题，但它已被删除(https://stackoverflow.com/questions/61593112/how
浏览 353提问于2020-06-09得票数 1
回答已采纳
1回答
目前，我有多个视图，可以通过向下拖动手势将其关闭。向下拖动时，视图会变小，直到到达我在导航器上调用goBack()的地方，完全忽略它。 现在，由于我不想在许多文件中一遍又一遍地实现这个逻辑，我已经尝试创建一个HoC来编写消除动画逻辑一次，并让我的其他组件专注于它们的特定任务。我还想将一个dismissAnimationProgress值传递给我的包装组件，这样它们就可以在用户拖拽时处理一些额外的逻辑(比如淡出一些东西)。 这是我的DismissableView.tsx export interface DismissableViewProps {
dismissProgress: R
浏览 17提问于2020-06-14得票数 0
2回答
我正在尝试构建一个使用拖放行为的应用程序，而被拖动的组件需要克隆到DOM的其他地方。由于组件已经被挂载，尝试再次挂载它会导致浏览器挂起。
尝试使用cloneWithProps会导致Cannot read property 'defaultProps' of undefined错误。
下面是一个测试案例：
var TestCase = React.createClass({
getInitialState () {
return {
draggingItem: null
}
},
render () {
return <di
浏览 4提问于2014-12-12得票数 2
回答已采纳
1回答
我正在尝试使用react制作一个可拖动的按钮。 按钮以正确的方式在页面上拖动，但当我放下它时。它的顶部和左侧的值变为负值(甚至没有重置为原来的顶部:0，左侧:0)，即组件退出页面。 代码沙盒链接：code 主要draggable.js组件： import React, { Component } from 'react';
import { Button } from '@material-ui/core';
class DraggableButton extends Component {
constructor() {
supe
浏览 10提问于2021-06-24得票数 0
回答已采纳
我有一个注册屏幕，我已经为它建立了两个自定义挂钩。
在useSignup中，我的注册方法及其本地被定义为util钩子，其中我已经定义了验证方法.
但我无法像预期的那样使用验证方法。这是注册屏幕
import React, {useState} from 'react';
import {
View,
Text,
StatusBar,
Keyboard,
TouchableOpacity,
ScrollView,
} from 'react-native';
import Icon from 'react-native-vector
浏览 0提问于2021-02-23得票数 0
回答已采纳
2回答
我目前正在使用React和样式组件进行终端仿真器项目。我想给终端添加拖动功能。一切都很好，除了一件事:我想点击并按住标题栏拖动终端，而不是其他地方。
下面是我的基本组件：
我不想使用任何插件或库，因为我想知道它是如何工作的。那么，是否有任何方法可以通过React和javascript来实现这一点呢？我对每一条评论都表示感谢。
浏览 0提问于2020-02-20得票数 0
回答已采纳
1回答
我正在构建一个应用程序，它需要一个拖放界面以及连接拖放的元素和构建流程图的能力。
我使用的是React和jsplumb。我知道jsplumb使用jQuery，不建议同时使用jQuery和React，但构建一个自定义的jsplumb替代方案需要大量的时间投资。
我可以按预期添加元素，但在从DOM中删除元素时遇到了一些问题。
这是基本结构：
在父组件中有一段名为myArray的状态。当用户将图标拖放到拖放区域时，我将创建一个新对象来表示拖放的项目，然后将其推送到myArray上。然后我调用setState来更新myArray状态。myArray作为道具传递到渲染节点组件中：
<RenderN
浏览 5提问于2017-03-16得票数 0
我已经用react-dnd创建了一个简单的可排序列表，使用的代码类似于中的react-dnd的可排序示例。
但是，我在尝试概念化如何调整此示例并利用react-dnd的来自定义拖动预览时遇到了一些困难。具体地说，我希望在开始拖动组件时更改组件的背景色。不要太复杂。
为什么我需要使用一个自定义的拖动层？因为由于浏览器API和react-dnd的HTML5后端的限制，我不能使用CSS设置拖动预览的样式(这就是我正在使用的)。
我在可排序列表中找不到任何使用自定义拖动层的示例，因此如果有任何帮助，我将不胜感激。
浏览 16提问于2020-04-06得票数 2
1回答
在TestCafe中似乎存在一个长期存在的问题，.focus()方法的手动调用无法工作，随后会引发问题：
可能相关：
我相信这至少在一定程度上是react-select在通过TestCafe测试时不能正确运行的原因之一。
希望能够键入react-select的输入，然后选择所需的选项。不幸的是，无法工作。可能是因为自线程处于活动状态以来的更新。
另一种选择是直接选择选项，但是在我们的项目中，由于可用的选择项的数量很大，我们最终需要使用react-virtualized。你可以找到我的。
我尝试过的方法：
await t.hover(
ReactSelector('Se
浏览 2提问于2019-12-16得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
