我从 API 获取数据并使用 React MUI 显示它
DataGrid
。
我启用了复选框选择,我想获取所选行的特定单元格项并将它们保存在列表中。
对于下图中的示例,如果我单击第一行的复选框,我想在列表中添加“当前位置”,然后如果我单击第二行,我希望在列表中添加第二行的当前位置现有列表。
下面是我当前的代码
<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);
}}
一个简单的解决方案
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)}
/>
就我而言,onSelectionModelChange 甚至不起作用:/