在ReactMaterial-UIDataGrid中获取复选框选择上的行项目
我从 API 获取数据并使用 React Material-UI Data Grid 显示它。我启用了复选框选择，我想获取所选行的特定单元格项目并将它们保存在列表中。
例如在下图中，如果我点击第一行的复选框，我想在列表中添加“当前位置”，然后如果我点击第二行，我想要第二行的当前位置添加到现有的列表。
下面是我当前的代码
<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);
}}
现场演示
THE END
二维码