反应材料-ui mui-datatables onRowSelectionChange ID

Question

这是我的反应代码。我正在使用材质 UI。我正在处理与 ID 相关的事件。下面提供了完整的代码。

这里，索引 ID 是自动生成的。问题与此有关。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

function Ag() {
  const [responsive, setResponsive] = useState("vertical");

  const onCellClick = () => {
    console.log("sadf");
  };
  const onRowsDelete = () => {
    console.log("remove");
  };
  const onRowSelectionChange = (ev, ex, ez) => {
    console.log(ez);
  };
  const columns = ["Name", "Title", "Location"];

  const options = {
    filter: true,
    filterType: "dropdown",
    responsive,

    onCellClick,
    onRowsDelete,
    onRowSelectionChange,
  };

  const data = [
    {
      Id: "1",
      Name: "sunder",
      Title: "dlamds",
      Location: "asdfsa",
    },
    {
      Id: "2",
      Name: "cvzx",
      Title: "sadfsda",
      Location: "sadfsdacv",
    },
    {
      Id: "3",
      Name: "dsfas",
      Title: "werq",
      Location: "ewqrwqe",
    },
    {
      Id: "4",
      Name: "wqer",
      Title: "gfdsg",
      Location: "bvcxb",
    },
    {
      Id: "5",
      Name: "ereq",
      Title: "qwer",
      Location: "sdafas",
    },
  ];

  return (
    <React.Fragment>
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    </React.Fragment>
  );
}

export default Ag;

我想要获取数据 ID，而不是单击时自动生成的索引 ID。

我应该怎么办？

Answer 1

onRowSelectionChange: (currentSelect, allSelected) => {           
     const result = allSelected.map(item => { return data.at(item.index) });
     const selectedIds = result.map(item => {
          return item.id;
     }); 
     console.log(selectedIds);           
 }