React-grid-layout: [Question] How to prevent parent GridItem from dragging when child is pressed?

[lantzh]

Hi,
I'm new to React and I'm struggling with changing the "isDraggable" prop of a parent GridItem to false when the child is pressed. I have a "dial" control generated in a canvas element inside in the parent GridItem, and I want to prevent the GridItem from moving when the user controls the dial. I have a hunch the solution is pretty straightforward, but I've been down many different paths and all I've accomplished thus far setting an overall "isDraggable" state to false, rather than the specific parent element. My source as it stands now:

class Grid extends React.Component {
  onChildChanged() {
      this.setState({ isDraggable: false })
    }
  render(){
    // layout is an array of objects, see the demo for more complete usage
    var layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    ];
    return (
      <div>
      <ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={100} width={1200}>
          <div key={'a'}></div>
          <div key={'b'}><CanvasElement
                            callbackParent={() => this.onChildChanged() }/></div>
          <div key={'c'}></div>
        </ReactGridLayout>
      </div>
    )
  }
};

class CanvasElement extends React.Component {

  handlePress() {
      this.props.callbackParent({isDraggable: false});
  }
  render() {
    return (
      <canvas className="dial"  onMouseDown={()=> this.handlePress()} ></canvas>
    )
  }
}

export default Grid;

Thanks in Advance!

[STRML]

Have handlePress call e.stopPropgation() so that RGL doesn't get the event.

[lantzh]

Awesome! Did the following:

  handlePress(e) {
      e.stopPropagation();
  }
  render() {
    return (
      <canvas className="dial"  onMouseDown={e => this.handlePress(e)} ></canvas>

Thank you for your super fast response.

[kartik2014]

Thanks @STRML for this solution !