Javascript 物料界面数据网格复选框重置

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

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

实时链接：

---

提前感谢。

通过您提供的链接，我将@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>
  );
}

功能选项卡面板（道具）{
const{children，value，index，rows，columns，…other}=props；
const[selectionModel，setSelectionModel]=useState（[]）；//添加了行
返回(
{value===索引&&(
{
setSelectionModel（newSelection.selectionModel）；
}}//添加行
selectionModel={selectionModel}//添加了一行
disableSelectionOnClick={true}
/>
)}
);
}

---

请参阅给定链接中的

，我将@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>
  );
}

功能选项卡面板（道具）{
const{children，value，index，rows，columns，…other}=props；
const[selectionModel，setSelectionModel]=useState（[]）；//添加了行
返回(
{value===索引&&(
{
setSelectionModel（newSelection.selectionModel）；
}}//添加行
selectionModel={selectionModel}//添加了一行
disableSelectionOnClick={true}
/>
)}
);
}

指