reactjs 获取React MUI数据网格中复选框选择的行项目

rmbxnbpk 于 2023-01-08 发布在 React

关注(0)|答案(2)|浏览(171)

我正在从API获取数据并使用React MUI DataGrid显示它。我已经启用了复选框选择，我想获取选定行的特定单元格项并将其保存在列表中。
例如，在下面的图像中，如果我点击第一行的复选框，我想在列表中添加“当前位置”，然后如果我点击第二行，我想在现有列表中添加第二行的当前位置。

下面是我目前的代码

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

但我得到的输出是这样的

我是React的新手，不知道如何获取所选行的当前位置值并将其添加到列表中。

reactjs

来源：https://stackoverflow.com/questions/66424752/get-row-item-on-checkbox-selection-in-react-mui-datagrid

2条答案

按热度按时间

r6l8ljro1#

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

现场演示

赞(0）回复(0）举报 2023-01-08

mkshixfv2#

一个简单的解决方案

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

我的数据网格对象

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

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 获取React MUI数据网格中复选框选择的行项目

2条答案

现场演示

相关问题

热门标签

最新问答