时间戳

首页 > 解决方案 > 材质 UI 数据网格复选框重置

javascript - 材质 UI 数据网格复选框重置

问题描述

我正在开发一个 React Js 项目，其中有不同的选项卡，每个选项卡都有不同的数据网格表。所有行都有复选框。

问题：当我从表 1 中选择任何行并切换到选项卡 2 并返回到 1 时，复选框会消失。我希望他们在那里，以便用户可以看到他们的选择。我为它们定义了单独的组件，但仍然无法获得所需的行为。这个问题只出在复选框上，我试着安慰一些状态变量，它们很好。

实时链接：https ://codesandbox.io/s/datagrid-reset-yhtt7?file=/src/App.js

先感谢您。

标签： javascriptreactjsdatagridmaterial-ui

解决方案

从您给定的链接中，我将 @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>
  );
}

请参阅受控选择部分

推荐阅读