在 React Material-UI DataGrid 中获取复选框选择上的行项目 [英] Get row item on checkbox Selection in React Material-UI DataGrid

问题描述

我从 API 获取数据并使用 React Material-UI 数据网格显示它.我已启用复选框选择，我想获取所选行的特定单元格项并将它们保存在列表中.

例如在下图中，如果我单击第一行的复选框，我想获取当前位置"；添加到列表中，然后如果我单击第二行，我希望将第二行的当前位置添加到现有列表中.

下面是我当前的代码

控制台.log(itm)}/>

但我得到这样的输出

我对 React 非常陌生，我不确定如何获取所选行的当前位置值并将其添加到列表中.

解决方案

您只能访问

I'm getting Data from API and displaying it using React Material-UI Data Grid. I have enabled check box selection and I want to get the specific cell items of the selected row and save them in a list.

For Example in the image below, if I click on the checkbox for the 1st row I want to get the "current location" added in a list and then if I click on the 2nd row I want current location of 2nd row added in the existing list.

Below is my current code

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

But I'm getting output like this

I'm very new to React and I'm not sure how to get current Location's value for the selected rows and add it to a list.

解决方案

You can only access the row ids inside onSelectionModelChange callback. If you want to get the whole row objects, use the original rows data and filter the others based on the selected ids.

Note: DataGrid stores each row ID in string internally so if the ID from your original row data is number you may want to convert it toString() before comparing.

rows={rows}
onSelectionModelChange={(ids) => {
  const selectedIDs = new Set(ids);
  const selectedRowData = rows.filter((row) =>
    selectedIDs.has(row.id.toString());
  );
  console.log(selectedRowData);
}}

Live Demo

这篇关于在 React Material-UI DataGrid 中获取复选框选择上的行项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！