reactjs - helmet - monitor.getDropResult() return null

react helmet seo

Question

monitor.getDropResult() devuelve null (lo veo console.log). Debería devolver el objeto (elemento arrastrado) con su posición. ¿Por qué devuelve nulo?

Firmo mi componente con DragSource, DropTarget ... pero todavía devuelve null

Aquí está mi código de componente completo:

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

Necesita crear un DropTarget y definir una función drop () dentro de su fuente, y todo lo que devuelva será lo que devuelva la función monitor.getDropResult () dentro de la función endDrag () de DragSource (por http: // gaearon. github.io/react-dnd/docs-drag-source-monitor.html ). No estoy seguro de cómo le gustaría que se vea el componente, pero si creó un DropTarget con una función de colocación similar a:

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

Entonces eso es lo que recibiría al llamar a getDropResult () en la función endDrag ().