connectDragSource для каждого элемента на карте (Drag and Drop: React DnD) - PullRequest
Новая
       36

connectDragSource для каждого элемента на карте (Drag and Drop: React DnD)

0 голосов
/ 17 декабря 2018

Как сделать так, чтобы каждый предмет можно было убрать?Поскольку функция map() возвращает новый массив, я решаю передать connectDragSource в метод, но я все еще получаю сбрасываемый Aray insted droppable Каждый элемент (форма)

for..in, forEach, for..of также не возвращает желаемого результата

Кто-нибудь решил такую ​​проблему? 

import React, { Component } from "react";
import { Segment, Icon } from "semantic-ui-react";
import { DragSource } from "react-dnd";
import ShapeItem from "./ShapeItem";

class Shapes extends Component {

  displayShapes = (shapes, connectDragSource) =>
    shapes.length > 0 &&
    shapes.map((shape) =>
      connectDragSource(
        <div key={shape.id}>
          <Segment>
            <Icon name={shape.name} size={shape.size} color={shape.color} />
          </Segment>
        </div>
      )
    );

  render() {
    const { shapes, connectDragSource} = this.props;
    return (
      <div>
        {this.displayShapes(shapes, connectDragSource)}
      </div>
    );
  }
}

const spec = {
  beginDrag(props) {
    return {
      shapeId: props.shapes.id
    };
  }
};

const collect = (connect, monitor) => ({
  connectDragSource: connect.dragSource(spec),
  isDragging: monitor.isDragging()
});

export default DragSource("shape", spec, collect)(Shapes);

Что касается документации http://react -dnd.github.io нашел только это: Реагирует на элемент как перетаскиваемый узел.Для этого замените любые element на this.props.connectDragSource(element) внутри функции рендеринга.

1 Ответ

0 голосов
/ 17 декабря 2018

Возможно, вы захотите создать отдельный компонент для визуализации каждого элемента и сделать его источником перетаскивания.Вам также необходимо вернуть true из функции canDrag в спецификации.

Отказ от ответственности: я не проверял приведенный ниже код.

shape.js 

import React, { Component } from "react";
import Item from './item.js';

class Shapes extends Component {    
    render() {
        const { shapes } = this.props;
        return (
            <div>
                {
                    shapes.length > 0 && 
                    shapes.map((shape) => <Item key={shape.id} shape={shape} />)
                }
            </div>
        );
    }
}

export default Shapes;

item.js 

import React, { Component } from "react";
import { Segment, Icon } from "semantic-ui-react";
import { DragSource } from "react-dnd";

class Item extends Component {    
    render() {
        const { shape, connectDragSource} = this.props;
        return connectDragSource(
            <div>
                 <Segment>
                     <Icon name={shape.name} size={shape.size} color={shape.color} />
                 </Segment>
            </div>
        )
    }
}

const spec = {
    beginDrag(props) {
        return {
            shapeId: props.shapes.id
        };
    },
    canDrag(props, monitor) {
        return true;
    },
    endDrag(props, monitor) {
        console.log("You dropped .... into " + monitor.getDropResult());
    }
};

const collect = (connect, monitor) => ({
  connectDragSource: connect.dragSource(spec),
  isDragging: monitor.isDragging()
});

export default DragSource("shape", spec, collect)(Item);
...