monitor.getDropResult() Retourne null

Question

monitor.getDropResult() renvoie null (je le regarde console.log). Il devrait retourner l'objet (élément déplacé) avec sa position. Pourquoi retourne-t-il une valeur nulle?

signature I mon composant avec DragSource, DropTarget..but retourne toujours null

Voici tout mon code du composant:

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

Vous devez créer un DropTarget et définir une fonction drop() dans sa source, et quoi que retourne ce qui sera retourné par la fonction monitor.getDropResult() à l'intérieur de la fonction endDrag() de DragSource (par http://gaearon.github.io/react-dnd/docs-drag-source-monitor.html). Je ne sais pas ce que vous aimeriez le composant lui-même à ressembler, mais si vous avez créé un DropTarget avec une fonction de chute ressemblant à:

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

Alors c'est-ce que vous recevriez d'appeler getDropResult() dans la Fonction endDrag().