我从 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);
}}
现场演示关于reactjs - 在 React Material-UI DataGrid 中获取复选框选择上的行项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66424752/