时间戳

首页 > 解决方案 > 从 localStorage 设置 Form.Check 默认值

javascript - 从 localStorage 设置 Form.Check 默认值

问题描述

如果有一堆来自 React-Bootstrap 的复选框，用于切换 React-Table 组件中的列，一切正常，但我想测试将复选框中的值存储在 localStorage 中，这样当我回到我的网站，这是我目前所拥有的

{allColumns.slice(2).map((column) => {
  const locValue = localStorage.getItem(column.id);
  return (
    <div key={column.id} className="table-checkbox-item">
      <Form.Check
        id={column.id}
        onClick={() => storeColumnToggleSelection(column)}
        type="checkbox"
        label={
          column.Header.charAt(0).toUpperCase() +
          column.Header.slice(1)
        }
        className="form-label"
        checked={locValue === null ? true : locValue}
      {...column.getToggleHiddenProps()}
    />
  </div>
  );
})}

这就是我从方法中将值存储在 localStorage 中的onClick方式

const storeColumnToggleSelection = (column) => {
  localStorage.setItem(column.id, !column.isVisible);
};

我可以在 localStorage 中看到值更新，如果我使用 console.log，我也可以从中获取值，但我无法Form.Check使用 localStorage 值更新。

更新

我发现了该checked属性的问题，当我从本地存储中获取项目时，它以 s 字符串形式出现，因此通过应用此

const locValue = JSON.parse(localStorage.getItem(column.id));

复选框确实打开和关闭，但我注意到 React-Table 提供了一个checked和onChange方法，column.getToggleHiddenProps()因此存在冲突我应该实现自己的，或者我可以使用道具提供的东西吗？如果是这样怎么办？

标签： javascriptreactjslocal-storagereact-bootstrap

解决方案

推荐阅读