Question

我在该行中有一个可点击的表格行和复选框。当用户单击该行时，用户将被重定向到其他页面。这是预期的行为。现在问题是当用户点击复选框时，用户也将被重定向到其他页面。这不是预期的行为。单击复选框不应触发redirect()方法

  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>

输出：

我该如何解决这个问题？提前谢谢。

Answer 1

请看一下这个代码段：https://codesandbox.io/s/qx6Z1Yrlk

您有两种选择：

在重定向函数中添加if语句，检查单击了哪个元素，并且只有在行的情况下才重定向（确保传入事件）。

或者，也可以在复选框上侦听单击事件，传入事件，并阻止事件冒泡到行元素。 stopPropagation在更改事件侦听器中不起作用，因为在更改事件之前触发了click事件。

Answer 2

您可以使用子点击处理程序中的stopPropagation来停止传播到父级：

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>

防止复选框和可单击的表行冲突

2 个答案: