在 React Material-UI DataGrid 中获取复选框选择上的行项目

问题描述

我从 API 获取数据并使用 React Material-UI 数据网格显示它。 我已启用复选框选择，我想获取所选行的特定单元格项并将它们保存在列表中。

例如在下图中，如果我点击第一行的复选框，我想在列表中添加“当前位置”，然后如果我点击第二行，我想要添加第二行的当前位置在现有列表中。

下面是我当前的代码

activeStores = (from a in activeStoreResult.ActiveStoresInfo
                                select new ActiveStoresviewmodel
                                {
                                    Store  = a.Store
                                    Closed =  a.Closed != DateTime.MinValue ? a.Closed : null
                                }).ToList();

但我得到这样的输出

我对 React 非常陌生，我不确定如何获取所选行的当前位置值并将其添加到列表中。

解决方法

您应该使用 onRowSelected 而不是 onSelectionModelChange。查看完整的 DataGrid API here。

• 使用 onSelectionModelChange 获取所有选定行 ID（状态）的列表。
• 使用 onRowSelected 获取选中的行数据（事件）。

onRowSelected={(e) => console.log(e.data)} // log row data

编辑：如果您想获取选定行数据的列表。需要先使用onSelectionModelChange获取选中的ID列表，然后从ID中获取行数据。

注意：DataGrid 在内部将 ID 列表存储在字符串中，因此如果原始行数据中的 ID 是数字，您可能需要在比较之前将其转换 toString()。

onSelectionModelChange={(e) => {
  const selectedIDs = new Set(e.selectionModel);
  const selectedRowData = data.rows.filter((row) =>
    selectedIDs.has(row.id.toString());
  );
  console.log(selectedRowData);
}}

现场演示