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

问题描述

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

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>

输出:

我该如何解决这个问题?预先感谢.

How can I solve this problem? Thanks in advance.

推荐答案

看看以下代码段: https://codesandbox.io/s/qx6Z1Yrlk

您有两个选择:

在重定向函数中添加一个if语句，以检查单击了哪个元素，并且仅在该行所在的情况下进行重定向(确保您通过了事件).

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).

或者，也侦听复选框上的click事件，传递事件，并阻止事件冒泡到row元素.stopPropagation在更改事件侦听器中不起作用，因为在更改事件之前触发了click事件.

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.

这篇关于防止复选框和可点击表格行冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！