如何解决在 React Material-UI DataGrid 中获取复选框选择上的行项目
我从 API 获取数据并使用 React Material-UI 数据网格显示它。 我已启用复选框选择,我想获取所选行的特定单元格项并将它们保存在列表中。
例如在下图中,如果我点击第一行的复选框,我想在列表中添加“当前位置”,然后如果我点击第二行,我想要添加第二行的当前位置在现有列表中。
下面是我当前的代码
activeStores = (from a in activeStoreResult.ActiveStoresInfo
select new ActiveStoresviewmodel
{
Store = a.Store
Closed = a.Closed != DateTime.MinValue ? a.Closed : null
}).ToList();
但我得到这样的输出
我对 React 非常陌生,我不确定如何获取所选行的当前位置值并将其添加到列表中。
解决方法
您应该使用 onRowSelected
而不是 onSelectionModelChange
。查看完整的 DataGrid
API here。
- 使用
onSelectionModelChange
获取所有选定行 ID(状态)的列表。 - 使用
onRowSelected
获取选中的行数据(事件)。
onRowSelected={(e) => console.log(e.data)} // log row data
编辑:如果您想获取选定行数据的列表。需要先使用onSelectionModelChange
获取选中的ID列表,然后从ID中获取行数据。
注意:DataGrid
在内部将 ID 列表存储在字符串中,因此如果原始行数据中的 ID 是数字,您可能需要在比较之前将其转换 toString()
。
onSelectionModelChange={(e) => {
const selectedIDs = new Set(e.selectionModel);
const selectedRowData = data.rows.filter((row) =>
selectedIDs.has(row.id.toString());
);
console.log(selectedRowData);
}}
现场演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。