Question

我有一个可拖动和可放置的组件端口。我正在使用react-dnd。对于后端我使用react-dnd-mouse-backend，因为我正在使用svg和html5后端不支持svg。我觉得react-dnd-mouse-backend可能是问题的根源该组件的代码如下： -

Port.js

import React, { Component } from 'react';
import { compose } from 'redux';
import { PropTypes } from 'prop-types';
import { itemTypes, portInnerRadius, portOuterRadius } from './constants';
import { DragSource, DropTarget } from 'react-dnd';

const portSource = {
    beginDrag: (props) => {
        const { id, pin, position } = props.port;
        console.log('Drag props ', id, pin, position );
        return {
            type: 'port',
            port: props.port
        };
    },

    endDrag: (props, monitor) => {
        if (!monitor.didDrop()) {
            console.log('Drop invalid');
            return;
        }
        const draggedPort = monitor.getItem().port;
        const droppedPort = monitor.getDropResult().port;
        console.log('dragged item ', draggedPort.id, draggedPort.pin);
        console.log('dropped item ', droppedPort.id, droppedPort.pin);
    }
};

const portTarget = {
    drop: (props) => {
        const { id, pin, position } = props.port;
        console.log('Drop props ', id, pin, position);
        return {
            type: 'port',
            port: props.port
        };
    }
};

function collectDrag(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging(),
        cursorDeltaOffset: monitor.getDifferenceFromInitialOffset()
    }
}

function collectDrop(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop()
    };
}

class Port extends Component {

    static propTypes = {
        connectDragSource: PropTypes.func.isRequired,
        isDragging: PropTypes.bool.isRequired,
        cursorDeltaOffset: PropTypes.object
    }

    render() {
        const { connectDragSource, connectDropTarget, isDragging, cursorDeltaOffset, port } = this.props;
        const { position } = port;
        const { x, y } = position;

        let path = '';
        if ( isDragging && cursorDeltaOffset ) {
            path = `M${x},${y} l${cursorDeltaOffset.x},${cursorDeltaOffset.y}`;
        }

        return connectDragSource(connectDropTarget(
            <g className={`g-connector-port`}>
                <g>
                    <circle className="circle-connector-pin circle-outer" cx={ position.x } cy={ position.y } r={ portOuterRadius } />
                    <circle className="circle-connector-pin circle-inner" cx={ position.x } cy={ position.y } r={ portInnerRadius } />
                </g>
                { isDragging && path &&
                    <path className="path-port-drag" d={ path } stroke="black"/>
                }
            </g>
        ));
    }
}


export default compose(
    DragSource(itemTypes.PORT, portSource, collectDrag),
    DropTarget(itemTypes.PORT, portTarget, collectDrop)
)(Port);

问题在于，当我尝试从一个端口拖动到另一个端口时，有时它工作正常。但其他一些时候，下降被解雇了两次。

https://gyazo.com/5956c9c75fcf9c3bf93e1b5c5281bcd7

如上所示，我第一次将左侧插针1连接到右侧插针1。日志应该是

drag props 1 1
drop props 2 1

相反，它是

drag props 1 1
drop props 2 1 
drop props 1 1

你可以在源头和目标上看到掉落两次。

第二次将左引脚2连接到右引脚2时，日志输出正如预期的那样。

同样在下面的gif中，注意isOver prop如何被随机设置为true，即使光标没有在它上面。 https://gyazo.com/9ca3652713ffab789e6d2fc0c3426cc7

我想知道为什么这种下降发生了两次，为什么只是偶尔发生。

React dnd Drop射击两次

0 个答案: