使 Table 组件中的复选框和行单击在 Material-UI 中的行为有所不同答案

【问题标题】：Make checkboxes and row click in Table component behave differently in Material-UI使 Table 组件中的复选框和行单击在 Material-UI 中的行为有所不同
【发布时间】：2017-08-18 13:38:00
【问题描述】：

我在我的 React Web 应用程序中使用 Material-UI Table 组件，但我似乎无法弄清楚当用户单击表格行上的某个位置时如何防止选择整行。如果用户选中复选框，我只希望选择该行。如果用户单击其他任何地方，我想显示有关数据行的其他详细信息。

对于其他上下文，我的表基本上用作邮箱。当用户单击该行（一条消息）时，它应该打开一个包含更多详细信息的新页面，但是当用户选中表格中消息旁边的复选框时，用户应该能够标记重要等。

我该怎么做呢？我应该使用onCellClick而不是onRowSelection吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以通过停止每个<TableRowColumn> 中的事件传播来解决此问题。为此，只需向每个<TableRowColumn> 添加带有onClick 处理程序的<div>。像这样的

<TableRowColumn> <div onClick={(e) => {e.stopPropagation()}}>Column 1</div> </TableRowColumn>

只需确保将其添加到每个 <TableRowColumn>

【讨论】：