使用表格组件中的复选框和行单击在Material-UI中的行为有所不同

时间:2017-03-25 17:13:40

标签: reactjs material-ui

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

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

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

1 个答案:

答案 0 :(得分:2)

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

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

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