如何使用 localStorage 存储复选框值？（反应+钩子）答案

【问题标题】：How to store checkbox values using localStorage? (react+hooks)如何使用 localStorage 存储复选框值？（反应+钩子）
【发布时间】：2020-02-03 22:27:00
【问题描述】：

这是我的Todolist 组件，它包含一个List，以及所有带有复选框以及材料列表和复选框的列表项。通过了两个道具：todos 和 deleteTodo。

const TodoList = ({ todos, deleteTodo}) => {
  return (
    <List>
      {todos.map((todo, index) => (
        <ListItem key={index.toString()} dense button>
         <Checkbox disableRipple/>
          <ListItemText key={index} primary={todo} />
          <ListItemSecondaryAction>
            <IconButton
              aria-label="Delete"
              onClick={() => {
                deleteTodo(index);
              }}
            >
              <DeleteIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
      ))}
    </List>
  );
};

我想出了如何使用本地存储将待办事项存储为数组，但不知道如何存储复选框值。有人可以解释一下，那将是什么策略？

这是主应用程序：


  const initialValue = () => {
    const initialArray = localStorage.getItem("todos");
    return JSON.parse(initialArray);
  };

  const [todos, setTodos] = useState(initialValue);

  useEffect(() => {
    const json = JSON.stringify(todos);
    localStorage.setItem("todos", json);
  });


  return (
    <div className="App">
      <Typography component="h1" variant="h2">
        Todos
      </Typography>

      <TodoForm
        saveTodo={todoText => {
          const trimmedText = todoText.trim();
          if (trimmedText.length > 0) {
            setTodos([...todos, trimmedText]);
          }
        }}
      />


      <TodoList
        todos={todos}
        deleteTodo={todoIndex => {
          const newTodos = todos.filter((_, index) => index !== todoIndex);
          setTodos(newTodos);
        }}
      />
    </div>
  );
};

我将不胜感激任何建议或指示，如何解决这个问题。谢谢

【问题讨论】：

你必须使复选框有状态。以与待办事项相同的方式将状态序列化到 localStorage。顺便说一句，您在功能方面需要什么复选框
你好，@Pavan。需要复选框来标记已完成的待办事项。但是使复选框有状态 - 意味着额外的useState？或者可以像这样将它存储在 todos 状态中：todos =[{text: 'Todo1', checked: 'true/false'}, {text: 'Todo1', checked: 'true/false'}] 对吗？
我更喜欢后一种方法。因为它是待办事项本身的状态。它应该只在 todo 对象中。您可以拥有一个键 isCompleted: true/false 并将其用于 hte 复选框。

标签： javascript reactjs local-storage jsx react-hooks

【解决方案1】：

一种方法是使用Checkbox component 的onChange 回调

例如<Checkbox disableRipple onChange={(e)=> onCheckboxChange(e.event.target) />（以及您需要的任何参数）

并通过道具将其传递给您的父组件，例如

const TodoList = ({ todos, deleteTodo, onCheckboxChange}) => {

然后您可以将值存储在父组件的本地存储中。可能有更优雅的方法

【讨论】：