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

Question

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

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

下面是我当前的代码

<DataGrid
   rows={rows}
   columns={columns}
   checkboxSelection     
   onSelectionModelChange={itm => console.log(itm)}
/>

但我得到这样的输出

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

Answer 1

这对我不起作用，直到我意识到onSelectionModelChange现在onRowSelectionModelChange在 MUI DataGrid 中（使用“@mui/x-data-grid”：“^6.2.1”）

对于像我这样在进入 stackoverflow 之前很难破译文档的人来说，我必须通过困难的方式来解决这个问题，即通过阅读文档。

Answer 2

一个简单的解决方案

const onRowsSelectionHandler = (ids) => {
    const selectedRowsData = ids.map((id) => rows.find((row) => row.id === id));
    console.log(selectedRowsData);
  };

我的 DataGrid 对象

<DataGrid
  rows={rows}
  columns={columns}        
  disableSelectionOnClick
  onSelectionModelChange={(ids) => onRowsSelectionHandler(ids)}
  />

编辑：

“onSelectionModelChange”现在是“onRowSelectionModelChange”

Answer 3

您只能访问onSelectionModelChange回调中的行 ID 。如果要获取整行对象，请使用原始rows数据并根据选定的 id 过滤其他数据。

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

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

现场演示