问题:在 React MUI DataGrid 中的复选框选择上获取行项目

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

例如下图中的示例,如果我单击第一行的复选框,我想将“当前位置”添加到列表中,然后如果我单击第二行,我希望将第二行的当前位置添加到现有列表中列表。

以下是我当前的代码

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

但我得到这样的输出

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

解答

您只能访问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);
}}

现场演示