时间戳

首页 > 解决方案 > 选择一行后，MaterialTable 将我送回第一页

javascript - 选择一行后，MaterialTable 将我送回第一页

问题描述

我一直在努力让 Material Table 以我想要的方式工作：我需要能够一次选择一行并使用它的 State 来操纵它的内容。我基于这个站点的示例（更准确地说，是 Selected Row Styling 示例）并设法做到了这一点：

const [rowState, setRowState] = React.useState({
        selectedRow: null,
    });

const [state, setState] = React.useState({
        columns: //columns format
        data: //table content
    });

<MaterialTable
    title="User Management"
    columns={state.columns}
    data={state.data}
    rowsPerPageOptions={[5,6,7]} //this doesn't seem to work at all
    onRowClick={((e, selectedRow) => setRowState({ selectedRow }))}
    options={{
         rowStyle: rowData => ({
         backgroundColor: (rowState.selectedRow && rowState.selectedRow.tableData.id === rowData.tableData.id) ? '#DDD' : '#FFF'
         })
    }}
/>

经过一些测试，结果证明该表可以正常工作，并且我可以通过 rowState 访问所选行的内容。

但是，每当我尝试从不是第一个页面的任何页面中选择一行时，它会立即将我扔回第一页，尽管该选择似乎运行正常。

从我在这里和那里尝试更改的内容来看，虽然一开始很明显，但问题出在 onRowClick 函数中。我将其更改为一个简单的 console.log，当单击其他页面的行时，它不会将我发送回第一页（console.log 按预期工作）。

我认为这实际上可能很简单，但是当谈到 Web 时，我是一个完整的初学者，所以我不知道问题到底是什么，也不知道如何解决它。我也很感谢我在 Table Pagination API 页面中看到的rowsPerPageOptions的帮助，尽管我不确定它是否应该在这里使用。非常感谢！

标签： javascriptreactjsmaterial-uimaterial-table

解决方案

推荐阅读