material-ui - Mui 数据表上的 selectRow

Question

这是我第一次尝试在 React 中使用 MUI-Datatables。我想从我在复选框上选择的行中获取数据。

 const options = {

         download: false,
         print: false,
         viewColumns: false,
         filterTable: false,
         filter: false,
         onRowsSelect:(currentRowsSelected: any, allRowsSelected: any) => {console.log(allRowsSelected);}

     };

这只给了我所选行的索引。有没有办法获取其行的数据。我需要该行的第一个单元格来删除/更新数据库。谁能帮帮我谢谢。

Answer 1

似乎当前的 API foronRowsSelect仅提供所选行的索引和所选行数。

要检索行数据，您必须提供一个onRowClick函数。它连续监听click事件。

onRowClick: (rowData, rowState) => {
  console.log(rowData, rowState);
},

Answer 2

即使在选项中也需要使用 onRowClick

const options = {
    filterType: 'dropdown',
    responsive: 'scrollFullHeight',
    serverSide: true,
    count: total,
    page: page,
    onRowClick: handleRowClick,
}

并将此选项传递给 MUI DataTable

<MUIDataTable
   title={"Service Request List"}
   data={requests}
   columns={columns}
   options={options}
/>

这是行点击处理程序：

const handleRowClick = (rowData, rowMeta) => {
    console.log(rowData, rowMeta);
};

Answer 3

您可以获取从 onRowsSelect 函数中选择的列的索引：

onRowsSelect : (curRowSelected, allRowsSelected) => {
    console.log("---RowSelect")
    console.log("Row Selected: ", curRowSelected);
    console.log("All Selected: ", allRowsSelected);
  }

并使用此索引从数据列表中获取数据