material-ui DataGrid - 如何将选择行复选框与 onRowClick 分开

问题描述 投票:0回答:2

我正在使用 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
2个回答
4
投票

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

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

沙盒


0
投票

但是如果我尝试使用已检查的行 ID,它也不起作用。 ``` handleRowClick(params, event)} 插槽={{ 工具栏:自定义工具栏, noRowsOverlay:自定义NoRowsOverlay, }}

  /> ```
© www.soinside.com 2019 - 2024. All rights reserved.