标签: react-dnd

有多个元素，我想同时使用它们使它们可拖放react dnd。这意味着我需要将其中一个元素拖放到另一个元素上。

首先，我为MyComponent定义了dragSource。到目前为止有效。但是，如何为同一组件设置DropTarget？

import React, { Component } from 'react'
import { DragSource, DropTarget } from 'react-dnd'

const elementSource = {
  beginDrag (props) {
    return { }
  }
}
const elementTarget = {
  drop (props, monitor) { }
}

function collect (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  }
}

class MyComponent extends Component {
  render () {
    const { connectDragSource, isDragging, connectDropTarget, isOver } = this.props

    return connectDragSource(
      <div style={{ opacity: …

我正在尝试在我的类上添加@DragDropContext装饰器,但是当我在浏览器中加载它时出现错误.

我的组件看起来像:

import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';

@DragDropContext(HTML5Backend)

class UserShowView extends React.Component {

}

export default connect(mapStateToProps)(UserShowView);

这是chrome控制台中的错误:

bundle.js:977未捕获错误:期望后端成为函数或导出默认函数的ES6模块.阅读更多:http: //react-dnd.github.io/react-dnd/docs-drag-drop-context.html

我的babelrc文件:

{
  "plugins": ["transform-decorators-legacy"],
  "presets": ["react", "es2015", "stage-0"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

packages.json:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node tools/srcServer.js",
    "test": …

在我将此代码实现到我的图像上传器之前,我正在研究一个简单版本的ReactDND.

每次添加图像时,它都会被添加到状态并传递给ReactDND,以便它可以拖动并且也可以放置(因此用户可以重新排列图像).

除了一件事,一切都很好.我遇到的问题是在添加多个图像之后,是一旦我拖放和图像(工作),状态不再为ReactDND更新,我无法添加新图像.

这是我的下面的代码(注意我只是使用一个按钮来添加额外的项目状态):

主要成分:

import React from 'react';

// Drag and drop stuff
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Container from './Container';

class ImageUploader extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            list: [],
            listCount: 1
        };

        this.onAddItem = this.onAddItem.bind(this);

    }

    onAddItem(e) {
        e.preventDefault();

        var listArray = this.state.list;
        var buildObject = {
            text: 'Jeremy' + this.state.listCount.toString(),
            age: '25',
            id: this.state.listCount
        };
        listArray.push(buildObject);

        let newListCount = this.state.listCount + 1;

        this.setState({
            list: listArray,
            listCount: newListCount …

我刚刚浏览了 React-beautiful-dnd 的文档，并在此处查看了该板拖放示例。

在react-beautiful-dnd git repo 中我看到以下文件HERE。它有以下代码：

// @flow
import React, { Component } from 'react';
import styled, { injectGlobal } from 'styled-components';
import { action } from '@storybook/addon-actions';
import Column from './column';
import { colors } from '../constants';
import reorder, { reorderQuoteMap } from '../reorder';
import { DragDropContext, Droppable } from '../../../src';
import type {
  DropResult,
  DragStart,
  DraggableLocation,
  DroppableProvided,
} from '../../../src';
import type { QuoteMap } from '../types';

const publishOnDragStart = action('onDragStart');
const publishOnDragEnd = …