monitor.getDropResult() 返回 null

Posted 2023-05-08

【中文标题】monitor.getDropResult() 返回 null

【英文标题】：monitor.getDropResult() return null

【发布时间】：2017-01-07 23:38:24

【问题描述】：

monitor.getDropResult() 返回 null（我看它是 console.log）。它应该返回对象（拖动的项目）及其位置。为什么返回null？

我用 DragSource,DropTarget 为我的组件签名..但它仍然返回 null

这是我的整个组件代码：

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($leftpx, $toppx, 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);

【问题讨论】：

是OkeyStone DragSource 和DropTarget?

如何知道这个组件是dragSource还是dropTarget？这是现有项目，我是 redux 的新手...许多其他组件使用此组件，您可以在此屏幕上看到：i.hizliresim.com/qEjlbW.jpg@ThoVo

先让它为一个简单的组件工作，然后再用你的复杂的，如果需要，重新阅读教程

@ThoVo 请制作 jsfiddle

看看这个例子：github.com/gaearon/react-dnd/tree/master/examples/04%20Sortable/…，因为它很容易开始。您需要定义一个dropTarget 来接收dragSource。思路是你可以得到拖拽对象和放置目标对象，完成拖拽的功能，需要你自己做

【参考方案1】：

您需要创建一个 DropTarget 并在其源中定义一个 drop() 函数，返回的内容将是 DragSource 的 endDrag() 函数内部的 monitor.getDropResult() 函数返回的内容（根据 http://gaearon.github.io/react-dnd/docs-drag-source-monitor.html ）。我不确定你希望组件本身是什么样子，但如果你创建了一个 DropTarget ，其放置函数类似于：

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

那么这就是你在 endDrag() 函数中调用 getDropResult() 所得到的结果。