Mui 数据表上的 selectRow答案

【问题标题】：Mui 数据表上的 selectRow
【发布时间】：2020-04-05 22:32:11
【问题描述】：

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

 const options = {

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

     };

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

【问题讨论】：

标签： material-ui mui-datatable

【解决方案1】：

目前onRowsSelect的API似乎只提供了选中行的索引和选中的行数。

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

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

【讨论】：

【解决方案2】：

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

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

并将此选项传递给 MUI 数据表

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

这是行点击处理程序：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：