如何在Mantine React Table中获取选中行数据并触发函数

要实现选中行时自动调用函数并更新props.selectedRow的状态，你可以借助Mantine React Table的onRowSelectionChange回调属性，具体操作如下：

1. 调整函数与选中行处理逻辑
   首先修改someFunction使其接收选中行数据作为参数，再定义处理选中行变化的函数：

   // 调整someFunction，接收选中行详情参数
   const someFunction = (rowDetails) => {
     props.selectedRow({
       id: rowDetails.id,
       rowData: rowDetails,
     });
   };
   
   // 处理选中行变化的回调函数
   const handleRowSelectionChange = ({ selectedRows }) => {
     // 单选模式下，仅处理存在选中行的情况
     if (selectedRows.length > 0) {
       someFunction(selectedRows[0]);
     } else {
       // 可选：取消选中时清空状态
       props.selectedRow(null);
     }
   };
   

2. 给表格绑定选中回调
   在MantineReactTable组件中添加onRowSelectionChange属性，绑定上面的处理函数：

   <MantineReactTable
     columns={tableHeader}
     data={tableData}
     enableColumnActions={true}
     enableColumnFilters={true}
     enablePagination={true}
     enableSorting={true}
     enableTopToolbar={true}
     enableRowSelection={true}
     muiSelectCheckboxProps={{
       color: 'secondary',
     }}
     enableStickyHeader
     enableStickyFooter
     enableSelectAll={false}
     enableMultiRowSelection={false}
     onRowSelectionChange={handleRowSelectionChange} // 新增该行绑定回调
   />
   

说明 #

由于你已经设置enableMultiRowSelection={false}，表格会强制保持单选模式，每次仅能选中一行。onRowSelectionChange会在用户选中或取消选中行时自动触发，通过selectedRows参数获取选中行的完整数据，进而调用someFunction完成props.selectedRow的状态更新。

内容的提问来源于stack exchange，提问作者rrahul789