Material-ui 表格行 onClick 绕过复选框选择

Question

我正在使用 material-ui 数据表进行排序。这在每行上包含一个复选框。我已经做到了每一行都会返回一个点击链接。

但是，我不希望该复选框充当单击，并希望它充当复选框并将该行添加到选定的行。但是当单击复选框时，将返回行链接。

我需要从行链接中排除该单元格或以某种方式排除复选框。

https://codesandbox.io/s/rlkv87vor4

这是我为逻辑所尝试的：

单击处理程序

if (event.target.classList.contains('selectCheckbox')) {
  return console.log('checkbox select');
  } else {
  return console.log('row link');
}

在我的演示 row link中，单击复选框时总是返回。

<TableCell padding="checkbox">
  <Checkbox className="selectCheckbox" checked={isSelected} />
</TableCell>

Answer 1

处理这个问题最直接的方法是handleClick为复选框和行（例如handleCheckboxClick和handleRowClick）使用两个单独的方法。

在handleCheckboxClick你可以然后调用event.stopPropagation();以防止handleRowClick被调用。

所以以下部分EnhancedTable将从：

  handleClick = (event, id) => {
    if (event.target.classList.contains("selectCheckbox")) {
      console.log("checkbox select");
    } else {
      console.log("row link");
    }

    const { selected } = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    this.setState({ selected: newSelected });
  };
...
<TableRow
  hover
  onClick={event => this.handleClick(event, n.id)}
  role="checkbox"
  aria-checked={isSelected}
  tabIndex={-1}
  key={n.id}
  selected={isSelected}
>
  <TableCell className="selectCheckbox" padding="checkbox">
    <Checkbox
      onClick={event => this.handleClick(event, n.id)}
      className="selectCheckbox"
      checked={isSelected}
    />
  </TableCell>

类似于以下内容：

  handleCheckboxClick = (event, id) => {
    event.stopPropagation();
    console.log("checkbox select");
    const { selected } = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    this.setState({ selected: newSelected });
  };
  handleRowClick = (event, id) => {
    console.log("row link");
  };
...
<TableRow
  hover
  onClick={event => this.handleRowClick(event, n.id)}
  role="checkbox"
  aria-checked={isSelected}
  tabIndex={-1}
  key={n.id}
  selected={isSelected}
>
  <TableCell className="selectCheckbox" padding="checkbox">
    <Checkbox
      onClick={event =>
        this.handleCheckboxClick(event, n.id)
      }
      className="selectCheckbox"
      checked={isSelected}
    />

这是一个显示这种方法的 CodeSandbox：