javascript - 防止复选框和可点击表格行冲突

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 在 change 事件监听器中不起作用，因为在 change 事件之前触发了 click 事件。