monitor.getDropResult() वापसी शून्य

Question

monitor.getDropResult() शून्य लौटाता है (मैं इसे console.log देखता हूं)। इसे अपनी स्थिति के साथ ऑब्जेक्ट (खींचा गया आइटम) वापस करना चाहिए। यह शून्य क्यों लौटता है?

मैं हस्ताक्षर DragSource के साथ अपने घटक, DropTarget..but यह अभी भी अशक्त

यहाँ है अपने पूरे घटक कोड लौटाता है:

import React, { PropTypes } from 'react'; 
import { DragSource } from 'react-dnd'; 
import { getEmptyImage } from 'react-dnd-html5-backend'; 

import { StoneConstants, StoneTypes, ItemTypes } from 'constants/AppConstants'; 
import OkeyStoneBase from 'components/OkeyStoneBase/OkeyStoneBase'; 

import './_OkeyStone.scss'; 

function checkForDragAction(props) { 

    // TODO receive the action via prop 
    if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE) { 
    props.onWithdrawMiddle(); 
    } else if (props.stoneType === StoneTypes.ON_DISCARD_WEST) { 
    props.onWithdrawLeft(); 
    } 
} 

function applyDropResult(props, result) { 

    if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE || props.stoneType === StoneTypes.ON_DISCARD_WEST) { 
     if (result === null) { //taşı tahtaya koymadıysa 

     } 
     props.withdrawRequestAtPosition(result.top, result.left); 
    } 

    if (props.stoneType === StoneTypes.ON_RAKE) { 
    if (result && result.stackType === StoneTypes.ON_DISCARD_SOUTH) { 
     props.onDiscardStone({ 
     id: props.id, 
     number: props.number, 
     color: props.color 
     }); 
    } 
    } 
} 

const stoneSource = { 
    canDrag(props) { 
    return props.draggable; 

    }, 

    beginDrag(props) { 
    if (props.onBeginDrag) { 
     props.onBeginDrag(); 
    } 

    checkForDragAction(props); 
    return { 
     id: props.id, 
     stoneType: props.stoneType, 
     left: props.left, 
     top: props.top, 
     color: props.color, 
     number: props.number 
    }; 
    }, 

    endDrag(props, monitor) { 
    if (props.onEndDrag) { 
     props.onEndDrag(); 
    } 
    console.log(props.onEndDrag); 
    console.log(monitor); 

    ***var result = monitor.getDropResult();*** 
    console.log('stoneSource'+result); 

    applyDropResult(props, result); 
    } 
}; 

function collect(connect, monitor) { 
    return { 
    connectDragSource: connect.dragSource(), 
    connectDragPreview: connect.dragPreview(), 
    isDragging: monitor.isDragging() 
    }; 
} 

function getStyles(props) { 
    const scale = StoneConstants.MINI_SCALE; 
    let { left, top, isDragging, isMini } = props; 
    const { zIndex } = props; 
    const { canTransition } = props; 

    let transform = `translate3d(${left}px, ${top}px, 0)`; 

    if (isMini) { 
    transform += ` scale(${scale}, ${scale})`; 
    } 

    let result = { 
    transformOrigin: 'top left', 
    transform: transform, 
    WebkitTransform: transform, 

    zIndex: zIndex, 
    opacity: isDragging ? 0 : 1, 
    height: isDragging ? 0 : '' 
    }; 

    if (isDragging || !canTransition) { 
    result.transition = 'none'; 
    } 

    return result; 
} 

class OkeyStone extends React.Component { 

    handleStoneClick (e) { 
    const { id, onClicked } = this.props; 
    if (onClicked) { 
     e.stopPropagation(); 
     onClicked(id); 
    } 
    } 

    componentDidMount() { 
    this.props.connectDragPreview(getEmptyImage(), { 
     captureDraggingState: true 
    }); 
    } 

    render() { 
    let { connectDragSource } = this.props; 
    let { number, color } = this.props; 
    let { isStable, isSelected } = this.props; 

    let stableStyle = isStable ? 'okey-stone-stable' : ''; 

    return connectDragSource(
     <div className={'okey-stone-parent ' + stableStyle} 
      onClick={this.handleStoneClick} 
      style={getStyles(this.props)}> 
     <OkeyStoneBase number={number} color={color} isSelected={isSelected}/> 
     </div> 
    ); 
    } 
} 

OkeyStone.propTypes = { 
    connectDragSource: PropTypes.func, 
    connectDragPreview: PropTypes.func, 
    isDragging: PropTypes.bool, 
    id: PropTypes.number, 
    left: PropTypes.number, 
    top: PropTypes.number, 
    stoneType: PropTypes.string, 
    isStable: PropTypes.bool, 
    isMini: PropTypes.bool 
}; 

export default DragSource(ItemTypes.STONE, stoneSource, collect)(OkeyStone); 

Answer 1

आप एक DropTarget बना सकते हैं और एक बूंद परिभाषित करने की जरूरत() फ़ंक्शन इसके स्रोत के भीतर, और जो कुछ भी लौटाता है वह ड्रैगसोर्स के एंडड्रैग() फ़ंक्शन (प्रति http://gaearon.github.io/react-dnd/docs-drag-source-monitor.html) के अंदर monitor.getDropResult() फ़ंक्शन द्वारा वापस किया जाएगा। मुझे यकीन है कि आप घटक खुद की तरह लग रहे करना चाहते हैं नहीं कर रहा हूँ, लेकिन अगर आप एक बूंद समारोह के साथ एक DropTarget बनाई जैसी:

const stoneDropSource = { 
    drop(props, monitor) { 
    return monitor.getItem(); 
    }, 
} 

तो यह है कि आप में getDropResult() को कॉल करने से प्राप्त होता क्या है endDrag() फ़ंक्शन।