页面重新加载后保存复选框状态答案

【问题标题】：save Checkbox state after page reload页面重新加载后保存复选框状态
【发布时间】：2021-03-01 14:22:29
【问题描述】：

我无法在页面重新加载后保存复选框状态。我现在已将未选中的复选框保存到 localStorage，但不知道下一步应该是什么。简单地说，当我取消选中一个复选框时，我希望当我返回该页面时它保持未选中状态。这是一个代码sn-p。

export default () => {
  const [isDefaultChecked, setDefaultChecked] = useState(true);
  const [isChecked, setChecked] = useState();
  const [isColumn, setColumn] = useState(true);
  const [hiddenColumns, setHiddenColumns] = useState([]);
  const [Checked, setIsChecked] = useState([]);
  
  const onCheckboxChange = (key: string, value: boolean) => {
    console.log(key, value);

    if (!value)
      setHiddenColumns((hiddenColumns) => [...hiddenColumns, { label: key }]);
    else setHiddenColumns(hiddenColumns.filter((x) => x.label !== key));
  };
 return(
 <Dialog
          isOpen={isDialogOpen}
          onOkClick={() => {
            localStorage.setItem(
              "hiddenColumns",
              JSON.stringify(hiddenColumns)
            );
            console.log(hiddenColumns);
            setDialogOpen(false);
          }}
          onCloseClick={() => setDialogOpen(false)}
        >
          <div>
            <Checkbox
              defaultChecked={isDefaultChecked}
              label="Delivery Methods"
              onChange={(value) => onCheckboxChange("delieveryMethods", value)}
            />
          </div>
 )

非常感谢！

【问题讨论】：

标签： reactjs typescript checkbox

【解决方案1】：

首先，我建议将其存储在会话存储中，除非您需要在新选项卡或窗口中打开后保持选中状态。

要做到这一点，您只需在组件构建时从会话存储中读取值。试试这样的...

() => {
  const [isChecked, setChecked] = useState(sessionStorage.getItem('isChecked') || false);
  const onCheckboxChange = (key: string, value: boolean) => {
    sessionStorage.setItem('isChecked', value)
    setChecked(value)
  };

  return (
   ...
   <Checkbox
     value={isChecked}
     label="Delivery Methods"
     onChange={(value) => onCheckboxChange("delieveryMethods", value)}
    />
  )
}

【讨论】：