React-dnd: एक `DropTarget` के अंदर `Dragging` को कैसे जानें?

मैं सरल सॉर्टेबल उदाहरण के लिए स्रोत की जांच करूंगा। ऐसा लगता है कि आप कुछ ऐसा ही करना चाहते हैं जो उन्होंने कार्डटार्ग में होवर के साथ किया था।

चूंकि स्रोत को शुरू होने पर एक आइटम वापस करने की आवश्यकता होती है, इसलिए मैंने 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 संदर्भ उदाहरण के लिए धन्यवाद। मैं इसे ckeck करूँगा!

अपने कोड को देखते हुए, आप अपने मौजूदा विजेटटारगेट ऑब्जेक्ट के भीतर एक होवर () फ़ंक्शन को परिभाषित कर सकते हैं। इसमें सिग्नेचर hover(props, monitor, component) , जिसे आप अपनी इच्छानुसार उपयोग कर सकते हैं।

आप monitor.getItem() चेक कर सकते हैं। अगर यह मौजूद है, तो आप खींच रहे हैं। नहीं तो नहीं।