Material Ui 数据网格复选框重置

Question

我正在做一个 React Js 项目，我有不同的选项卡，每个选项卡都有不同的数据网格 table。所有行都有复选框。

问题：当我 select 来自 table 1 的任何行并切换到选项卡 2 并返回到选项卡 1 时，复选框消失了。我希望他们在那里，以便用户可以看到他们的 select 离子。我为它们定义了单独的组件，但仍然无法获得所需的行为。此问题仅与复选框有关，我尝试了一些状态变量，并且它们很好。

直播 link : https://codesandbox.io/s/datagrid-reset-yhtt7?file=/src/App.js

提前致谢。

Answer 1

根据您给定的 link，我将 @material-ui/data-grid 包从 4.0.0-alpha.19 更新为 4.0.0-alpha.20 并修改了 TabPanel 组件以使用 DataGrid 的 onSelectionModelChange 和 selectionModel 道具：

function TabPanel(props) {
  const { children, value, index, rows, columns, ...other } = props;
  const [selectionModel, setSelectionModel] = useState([]); //added line
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <div className={styles.table}>
          <DataGrid
            rows={rows}
            columns={columns}
            hideFooter
            checkboxSelection
            onSelectionModelChange={(newSelection) => {
              setSelectionModel(newSelection.selectionModel);
            }} //added line
            selectionModel={selectionModel} //added line
            disableSelectionOnClick={true}
          />
        </div>
      )}
    </div>
  );
}

参考Controlled selection section

Material Ui 数据网格复选框重置

Material Ui data grid checkbox reset

javascript

datagrid

reactjs

material-ui