我无法使用 Material UI DataGrid 中的 onRowSelected 获取选中的行数据

Question

我试图在 DataGrid 组件中单击时获取 Checked 行的数据。
当我尝试做这个时，我可以用 DataGrid 的 onRowSelected 属性得到这个。

但是现在我无法达到这个属性。我现在不建议弃用或其他。现在，使用 onSelectionModelChange 属性，我只能获得该行的 ıd 值。但我需要的是获取该行的对象及其字段。我可以用 onRowClick 属性得到我想要的东西，但我必须用 复选框选择 得到它，我必须用 DataGrid 组件来实现。

现在是我的 datagrid

<DataGrid
  rows={this.props.rows}
  columns={this.props.columns}
  pageSize={5}
  checkboxSelection
  disableSelectionOnClick
  onRowSelected={(selection) => {
    //Cannot reach any selection data. Need another attrib. attribute.
    console.log(selection);
  }}
/>

我的专栏：

columnsPlants: [
  { field: 'plantId', headerName: 'ID', width: 120 },
  { field: 'name', headerName: 'Plant Name', width: 230 },
  { field: 'eic', headerName: 'EIC', width: 170 },
  { field: 'organizationETSOCode', width: 200, headerName: 'Organization ETSO' },
  {
    field: 'addPortfolio',
    headerName: 'Add to Portfolio',
    width: 200,
    editable: false,
    sortable: false,
    disableClickEventBubbling: true,
    renderCell: (params) => {
      return (
        <div
          className="d-flex justify-content-between align-items-center"
          style={{ cursor: 'pointer', marginLeft: '25px' }}
        >
          {this.AddtoPortfolio(params.row.plantId)}
        </div>
      );
    },
  },
],

以及选中复选框时我想要获取的数据格式：

Answer 1

您只能访问 onSelectionModelChange 回调中的行 ID。如果要获取整行对象，请使用原始 rows 数据并根据所选 ids 过滤其他数据。

注意：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);
}}

我无法使用 Material UI DataGrid 中的 onRowSelected 获取选中的行数据

I can't get checked row data with onRowSelected in Material UI DataGrid

datagrid

reactjs

material-ui

现场演示