Prevent Checkbox And Clickable Table Row Conflict

I have a clickable table row and checkbox in that row. When user click on that row, user will be redirected to other page. That was expected behavior. Now the problem is when user

Solution 1:

Have a look at this snippet: https://codesandbox.io/s/qx6Z1Yrlk

You have two options:

Adding an if-statement in your redirect function checking what element has been clicked on and only redirect if it's the row (make sure you pass in the event).

Or, listening for a click event on the checkbox as well, passing in the event, and stop the event from bubbling to the row element. stopPropagation won't work in the change event listener as the click event is fired before the change event.

Solution 2:

You can use the stopPropagation in the child's click handler to stop propagating to the parent:

constParent = props => {
  return (
    <divclassName="parent"onClick={props.onClick}><div>Parent</div>
      {props.children}
    </div>)
}
constChild = props => {return (<divclassName="child"onClick={props.onClick} >child</div>) }

classWrapperextendsReact.Component{
  constructor(props){
    super(props);
    
    this.onParentClick = this.onParentClick.bind(this);
    this.onChildClick = this.onChildClick.bind(this);
  }
  
  onParentClick(e){
    console.log('parent clicked');
  }
  
  onChildClick(e){
    e.stopPropagation();
    console.log('child clicked');
  }
  
  render(){
    return(
      <ParentonClick={this.onParentClick}><ChildonClick={this.onChildClick} /></Parent>
    );
  }
}

ReactDOM.render(<Wrapper/>,document.getElementById('app'))

.parent{
  box-shadow: 002px1px#000;
  min-height: 60px;
  padding: 10px;
  cursor: pointer;
}

.child{
  box-shadow: 001px1px red;
  min-height: 10px;
  max-width: 40px;
  padding: 1px;
  cursor: pointer;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="app"></div>