React-dnd: 如何知道`DropTarget`中的`isDragging`？

我将检查Simple Sortable示例的源代码。 听起来您想要执行与他们在cardTarget中进行悬停类似的操作。

由于在beginDrag时需要source返回项，因此我实现了isDragging的工作版本，如下所示：

import React from 'react';
import { ItemTypes } from '../../constants';
import { DropTarget } from 'react-dnd';

const widgetTarget = {
  drop(props) {
    // moveKnight(props.x, props.y);
  }
};

function collect(connect, monitor) {
  const item = monitor.getItem();
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    item: item,
    isDragging: !!item,
  };
}

@DropTarget(ItemTypes.WIDGET, widgetTarget, collect)
export default class WidgetHolder extends React.Component {
  render() {
    const {
      connectDropTarget,
      isDragging,
      isOver,
      item
    } = this.props;
    const style = {
      width: '100%',
      visibility: isDragging? 'visible': 'hidden',
      backgroundColor: isOver? 'green': 'inherit',
    };
    return connectDropTarget(
      <div style={style}>
        Drop here
      </div>
    );
  }
};

@wdhorton感谢您的参考示例。 我会踢的！

查看您的代码，您可以在现有的widgetTarget对象中定义hover（）函数。 它将具有签名hover(props, monitor, component) ，您可以根据需要使用。

您可以检查monitor.getItem() 。 如果存在，那么您正在拖动。 否则不行。