如何从React中的材料表中检索selectedRows

问题描述

我有一个物料表，并且使用选择和过滤。

在材料表上方，我有一个按钮，如果您单击该按钮，应将所选行“发送”到其父级。

但是如何检索所选的行？我知道我能做到

const [selectedRows,setSelectedRows] = useState([]);


<MaterialTable 
...
onSelectionChange={(rows) => {
   setSelectedRows(rows);
}}

... />

但是setSelectedRows导致Table重新呈现，然后我所有的过滤器都消失了。我知道我也可以将过滤器存储在一个状态中，但这听起来像是对于simpe问题来在某个特定时间点检索selectedRows来说，开销太大。

有什么简单的建议吗？

非常感谢您的帮助

解决方法

使用组件prop并将FilterRow组件提升为父状态，如下所示。过滤器值将持续存在。

import MaterialTable,{ MTableFilterRow } from 'material-table';

const Parent = () => {
  const [components,whatever] = useState({
    FilterRow: props => <MTableFilterRow {...props} />,});

  const [columns] = useState([
    { title: "Name",field: "name" },{ title: "Pet",field: "pet" }
  ]);

  const [data] = useState([
    { name: "Jim",pet: "Dog" },{ name: "Tom",pet: "Horse" },{ name: "Susan",pet: "Rat" },{ name: "Penny",pet: "Cat" }
  ]);


  return (
    <MaterialTable
      columns={columns}
      data={data}
      components={components}
    />
  );
}
``

material-table reactjs reactjs