4

I'm facing a problem doing stuff with React-DND.

My question is about preventing dragging a component for a specific state. But "canDrag" can only have props and monitor as Parameters. (monitor.getItem shows null in my case) and I cannot use the props because these will be present in every component (since the props came from the parent component).

Does anyone has any idea solving this problem?

Thx

Brian Burns
  • 20,575
  • 8
  • 83
  • 77
Marouen Mhiri
  • 1,640
  • 1
  • 14
  • 20
  • Yep there is no way to access the component itself from `canDrag` only its props, and `monitor.getItem` will only return something when dragging is in progress, since that is the data you are transferring with the drag event, not the component. It sounds like your component is doing too much and should be split further to a point where you have a draggable sub-component that CAN have its props set via whatever state you are using to control if draggable or not, but without posting your code its hard to help further – alechill Jul 21 '17 at 10:51
  • Thx for your answer! My component contains a form with two buttons. One to make the fields editable (this is the 'editable' state of the component and in this case there should no drag possible) and the other button is for saving data. So my component is very simple – Marouen Mhiri Jul 21 '17 at 13:49
  • 3
    In that case, it sounds like you should have the state tracked in a wrapper component, and pass it down as an `isEditable` prop to your form as a sub-component. This can then be assessed in `canDrag` for the sub-component. Can only help further if you post some code – alechill Jul 21 '17 at 15:39

1 Answers1

1

You can do it in component rather then in spec

@DragSource(dragtype, sourceSpec, cnt => ({
  connectDragSource: cnt.dragSource(),
}))
export default class Dragable extends React.Component {
  state = {
    canDrag: false,
  }
  render() {
   const { connectDragSource } = this.props;
   const { canDrag } = this.state;
   const cntDragSource = canDrag ? connectDragSource : i => i;
    return cntDragSource(
     <div className="drag-target" />
    )
  }
}
user7198300
  • 21
  • 2