monitor.getDropResult() return null

Question

monitor.getDropResult()은 null을 반환합니다 (console.log로 보입니다). 위치와 함께 객체 (드래그 된 항목)를 반환해야합니다. 왜 null을 반환합니까? 당신은 DropTarget에 작성하고 드롭을 정의 할 필요가

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

() 함수 :

I 서명이 DragSource에 내 구성 요소는 여전히 널 여기

내 전체 구성 요소 코드를 반환 DropTarget..but DragSource의 endDrag() 함수 (http://gaearon.github.io/react-dnd/docs-drag-source-monitor.html) 내부의 monitor.getDropResult() 함수가 반환하는 값이 무엇이든 반환됩니다. 그런 다음 당신이에 getDropResult()를 호출로부터 받게 될 것입니다

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

을 : 나는 당신이 같이 할 수있는 구성 요소 자체를 싶습니다 모르겠어요,하지만 당신은 드롭 기능 DropTarget에 만든 경우 닮은 endDrag() 함수.