material-ui DataGrid - 如何从 onRowClick 中分离选择行复选框答案

【问题标题】：material-ui DataGrid - how to separate selecting the row checkbox from onRowClickmaterial-ui DataGrid - 如何从 onRowClick 中分离选择行复选框
【发布时间】：2021-03-04 17:20:57
【问题描述】：

我正在使用 DataGrid 来管理服务配置。我想使用自动生成的行复选框来管理多个删除操作，但想使用 onRowClick 事件将行数据提供给模式对话框表单进行编辑。我的 onRowClick 处理程序工作得很好，并且完全按照我想要的方式填充模式。不幸的是，单击该行也会选择该行——换句话说，单击该行的复选框被选中。我希望仅在单击复选框本身时才选择该行，而不是在单击该行时。

我的 DataGrid 声明如下所示。

                    <DataGrid 
                        columns={this.columns} 
                        rows={fmConfigs}                              
                        pageSize={10} 
                        checkboxSelection 
                        autoHeight
                        onRowClick={(rowData) => this.handleClickOpenFmConfigForm(rowData.row)} 
                />

通常，我希望 onRowClick 处理程序有第二个参数来表示事件，所以我可以调用类似 e.stopPropagation() 的方法，但唯一传递的是 GridRowParams 类型的对象，其中有没有文档。我希望也许事件对象被埋在那里的某个地方，但我找不到它。当我将对象打印到控制台时，我可以看到有很多数据——这就是我能够找到需要传递给表单的行数据的方式——但我没有看到该事件。

有谁知道如何做到这一点？

【问题讨论】：

标签： datagrid material-ui onrowclick

【解决方案1】：

将disableSelectionOnClick={true} 添加到DataGrid 组件中，根据doc，单击行或单元格时的选择将被禁用。

<DataGrid
        disableSelectionOnClick={true}
        rows={rows}
        columns={columns}
        pageSize={5}
        checkboxSelection
      />

sandbox

【讨论】：

谢谢！我完全错过了。