Question

我正在使用material-ui数据表进行排序。每行都包含一个复选框。我已经确保每一行都返回指向链接的点击。

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

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

这是我为逻辑所做的尝试：

点击处理程序

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

在我的demo row link中，当始终选中该复选框时，就会返回它。

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

Answer 1

最简单的处理方法是为复选框和行使用两个单独的from django.dispatch import receiver from simple_history.signals import ( post_create_historical_record ) @receiver(post_create_historical_record) def post_create_historical_record_callback(sender, **kwargs): history_instance = kwargs['history_instance'] if history_instance.get_history_type_display() == "Created": history_instance.delete()方法（例如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>

下面是一个显示此方法的CodeSandbox：

signal

Answer 2

所以这里有多个问题。

1）className不是Checkbox API的有效属性 https://material-ui.com/api/checkbox/#checkbox-api

2）console.log(event.target)显示实际点击发生在用于设置输入样式的svg标签上，而不是输入本身。因此，您也不能直接使用inputProps = {{className：“ selectedCheckbox”}}并从classList捕获相同的内容

您可以引用此沙箱，看看如果您实际单击input：https://codesandbox.io/s/r7j4j638qn

如何获得期望的结果。

因此，可能的答案是修改icon组件的Checkbox属性，并将其设置为具有指定类的自定义图标？然后它将按预期工作。

Answer 3

只需在复选框上添加onClick并调用e.stopPropagation();，以防止从复选框和行组件两次调用onClick！

handleClick = (event, id) => {
    event.stopPropagation();

    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
                      onKeyDown={event => this.handleKeyDown(event, n.id)}
                      role="checkbox"
                      aria-checked={isSelected}
                      tabIndex={-1}
                      key={n.id}
                      onClick={event => onMore(event, n.id)}
                      selected={isSelected}
                    >

                      <TableCell padding="checkbox">
                        <Checkbox color="primary" checked={isSelected}
                                  onClick={event => this.handleClick(event, n.id)}/>
                      </TableCell>
</TableRow>

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

3 个答案: