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 click on checkbox, user also will be redirected to other page. This is not the expected behavior. Clicking on checkbox should not trigger redirect() method

  handleChange(e) {
    this.setState({
      checkbox: e.target.checked,
    });
  }

  redirect() {
    Router.push('/registration/register/RegisterEditor', '/verification/e7fe5b68-94e8-435f-8303-5308fd1f7e69');
  }

              <tbody>
                {inventory.list().map((data, index) => (
                  <tr key={'asset'.concat(index)} onClick={() => { this.redirect(); }} tabIndex={index + 1} role="button">
                    <td className="text-center">{index + 1}</td>
                    <td>{data.item}</td>
                    <td width="3%">
                      <Input className="mx-auto" type="checkbox" onChange={this.handleChange} />
                    </td>
                  </tr>
                ))}
              </tbody>

Output:

How can I solve this problem? Thanks in advance.

回答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.

回答2:

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

const Parent = props => {
  return (
    <div className="parent" onClick={props.onClick}>
      <div>Parent</div>
      {props.children}
    </div>)
}
const Child = props => {return (<div className="child" onClick={props.onClick} >child</div>) }

class Wrapper extends React.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(
      <Parent onClick={this.onParentClick}>
        <Child onClick={this.onChildClick} />
      </Parent>
    );
  }
}

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

.parent{
  box-shadow: 0 0 2px 1px #000;
  min-height: 60px;
  padding: 10px;
  cursor: pointer;
}

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

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

<div id="app"></div>

来源：https://stackoverflow.com/questions/44697735/prevent-checkbox-and-clickable-table-row-conflict

标签

javascript

reactjs

checkbox