React-dnd: Comment savoir `isDragging` dans un` DropTarget`?

Je vérifierais la source de l' exemple triable simple . Il semble que vous vouliez faire quelque chose de similaire à ce qu'ils ont fait avec le survol dans cardTarget.

Étant donné que la source est requise pour renvoyer un élément lorsque beginDrag, j'ai implémenté une version fonctionnelle de isDragging comme ceci:

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 merci pour l'exemple de référence. Je vais le vérifier!

En regardant votre code, vous pouvez définir une fonction hover () dans votre objet widgetTarget existant. Il aura la signature hover(props, monitor, component) , que vous pouvez utiliser comme vous le souhaitez.

Vous pouvez vérifier monitor.getItem() . S'il existe, vous faites glisser. Sinon non.