标签: react-dnd

我正在创建一个Web应用程序，该应用程序将允许用户在屏幕上拖动和拖动多个片段，每个片段都包含单独的特定数据。如果用户想在屏幕上添加更多作品，他们只需单击一个按钮，就会出现另一作品。我使用了React DND（Drag and Drap）库来保持我的组件之间的分离，到目前为止，一切都还不错。问题在于在屏幕上添加更多作品的动态功能。当前（在下面的子代码中），我正在获取旧的状态对象，执行浅表复制，并将新创建的对象与先前存在的状态对象合并，并在完成后更新状态。但是，每次执行此操作时，一切正常（在屏幕上生成新的片段），直到我去移动一个新片段，并出现以下错误：

在现有状态转换期间（例如在内render）无法更新。渲染方法应该纯粹是props和state的函数。

我该如何摆脱这个错误，并更新状态对象。

注意：按钮（在下面的屏幕快照中）显示State对象中对象数量的当前计数。所以下面我在状态中添加了7个对象

应用截图： 上级：

  import React, { Component, PropTypes } from 'react';
    import Header from '../../components/Header/header';
    import Footer from '../../components/Footer/footer';
    import Student from '../../components/box1/box1';
    import Box from '../../components/box2/box2';
    import { DragDropContext } from 'react-dnd';
    import HTML5Backend from 'react-dnd-html5-backend';
    require('./home.css');


var Home = React.createClass({
  getDefaultProps: function(){

    return{ count: 3 }  
  },

  getInitialState: function(){
     return{ count: this.props.count }
  },

  add: function(){
     this.setState({ count: this.state.count + 1 });
  },

  render() {

    return (
        <div id="main">
              <Box …

我正在尝试测试我的react-dnd的实现，并且在我的一个drop函数中，我正在使用该monitor.getInitialClientOffset()函数获取偏移量，并且我想对这个方法进行存根处理以返回特定的偏移量，然后可以断言该偏移量继续，但我无法弄清楚。在测试中，我正在使用

const WrappedContext = wrapInTestContext(ContextArea);
const page = mount(<WrappedContext />);
const manager = page.get(0).getManager();
const backend = manager.getBackend();

// Couple finds to get the right source and target ids

backend.simulateBeginDrag([sourceId])
backend.simulateHover([targetId])
backend.simulateDrop();
backend.simulateEndDrag();

（这是使用来自https://gaearon.github.io/react-dnd/docs-testing.html的标准wrapInTestContext ）

drop函数从测试后端传递了一个监视器，我在文档中看不到将其存根版本传递给任何模拟方法的方法。

我正在开发一个react dnd 项目，我正在关注react-dnd 文档。一切正常，但我无法在拖动时滚动。

当我拖动一个项目并到达最后一个可放置源时，我需要一个滚动条，然后它会自动滚动并允许我将项目放在那里。

如果有人知道如何做到这一点，请与我分享。我将非常感激。

我正在尝试在 DropTarget 的悬停功能中更新道具，但这似乎不可能？重绘的动作发生在 componentDidUpdate 中，我基本上想在我在悬停内读取的值中设置一些道具/状态（如果指针向右太远，则设置一个将触发 componentDidUpdate 执行的道具 - 悬停是我唯一可以听到这些变化的地方 afaik）。这是可能的，还是有其他推荐的方法？

我是反应新手，并尝试使用react-dnd 实现拖放。但是我不能在基于类的组件中使用钩子。由于以下部分的代码，我收到错误。

 const [{ isDragging }, drag] = useDrag({
           item: { type: ItemTypes.Student },
          collect: (monitor) => ({
            isDragging: !!monitor.isDragging(),
          }),
        });

如何在仍然使用基于类的组件的同时实现相同的功能？下面是完整的代码

class App extends Component {
  state = {
    values: [],
  };
const [{ isDragging }, drag] = useDrag({
      item: { type: ItemTypes.Student },
      collect: (monitor) => ({
        isDragging: !!monitor.isDragging(),
      }),
    });

  divStyle = {
    "margin-left": "20px",
  };

  componentDidMount() {
    axios.get("http://localhost:5000/api/student").then((response) => {
      this.setState({
        values: response.data,
      });
    });
  }

  render() {

    return (
      <div
        ref={drag}
        style={{
          opacity: isDragging …

我正在努力使用react-dnd. 这涉及将一项从一个组件拖放到另一组件中。从功能上讲，它工作得很好，但我在测试“drop”以便触发该功能时遇到了麻烦。当我测试时，我根本无法让它记录我正在掉落。

一些相关信息：

• 这是一个功能组件 - 大多数文档都以类组件为中心
• 我见过的大多数文档都涉及在同一组件内进行拖放 - 这是在两个单独的组件之间发生的
• 我尝试过使用酶（使用 mount）和 React 测试库（使用 render）进行测试

“删除”组件代码

const TableBody = React.forwardRef(({ <props> }: Props, ref) => {
    const [{ isOver }, drop] = useDrop({
        accept: 'TestItem',
        drop: (droppedItem: any) => dropFunction(droppedItem),
        collect: monitor => ({
            isOver: monitor.isOver(),
        }),
    });

    ...

    return (
        <MaterialTableBody ref={ref} role='rowgroup'>
            { <code to render rows }
        </MaterialTableBody>
    );
});

测试示例

test('Dropping on a table triggers the drop function', () => {
    const mockDropFunction = jest.fn(); …

我读过一些用户提到他们正在使用这个带有Typescript支持的库,但我无法在任何地方找到任何文档,也似乎无法让它自己运行.

我正在使用typescript 2,我无法创建一个非常简单的工作示例,只允许我拖动现有的组件.我尝试了几种可能性,但是在调用DragSource(作为装饰器或函数)或渲染生成的组件时,我总是遇到一些打字问题.

简而言之,我想要一个示例,它显示了typescript中react-dnd的用法,它允许我如何使现有组件可拖动,可能没有修改组件本身(它应该不知道它是可拖动的)

感谢您的任何帮助!

我只是通过BigCalendar拖放例如去这里。我试图自己创建一个本地拖放示例，以了解拖放如何与BigCalendar一起使用。我创建了以下内容：

Dnd.js

import React from 'react'
import events from './events'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/css/react-big-calendar.css';

import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';

const DragAndDropCalendar = withDragAndDrop(BigCalendar)

class Dnd extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      events: events,
    }

    this.moveEvent = this.moveEvent.bind(this)
  }

  moveEvent({ event, start, end }) {
    const { events } = this.state

    const idx = events.indexOf(event)
    const updatedEvent = { ...event, start, end } …

我使用类似于在codesandbox中找到的react-dnd可排序示例的代码，使用react-dnd创建了一个简单的可排序列表。

然而，我在尝试概念化如何调整这个示例并利用react-dnd的自定义拖动层来自定义拖动预览时遇到了一些困难。具体来说，我想在开始拖动组件后更改其背景颜色。没什么太复杂的。

为什么需要使用自定义拖动层？因为由于浏览器 API 和 React-dnd 的 HTML5 后端（这就是我正在使用的）的限制，我无法使用 CSS 设置拖动预览的样式。

我无法在可排序列表中找到任何使用自定义拖动层的示例，因此我们将不胜感激。

我正在使用 React-dnd，并尝试创建一个具有可排序行的表，该表只能从手柄中拖动，手柄是右侧的一个小跨度。

他们在这里给出的示例 https://react-dnd.github.io/react-dnd/examples/customize/handles-and-previews

不显示任何排序。我可以使用不同的预览让句柄工作，问题是如果我使用他们提供的代码，用于对表进行排序的拖放区仅当我将其直接悬停在跨度上时才起作用，而不是像应有的那样悬停在行上。

我的代码：

 const dragRef  = useRef<any>(null)


const [{ isDragging }, drag, preview] = useDrag({
    type: DragTypeEnum.ENTRY,
    item: () => {
        return { id: props.id, index: props.sequence }
    },
    collect: (monitor: any) => ({
        isDragging: monitor.isDragging(),
    }),
});


const [{ handlerId }, drop] = useDrop({
    accept: DragTypeEnum.ENTRY,
    collect(monitor) {
        return {
            handlerId: monitor.getHandlerId(),
        }
    },
    hover(item: DragItem, monitor: DropTargetMonitor) {
        if (!dragRef.current) {
            return
        }
        const dragId = item.id
        const hoverId = props.id;

        // Don't replace items …