如何使用localStorage存储复选框值？ （反应+勾号）

Question

这是我的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>
  );
}; 

对于解决该问题的任何建议或指导，我将不胜感激。谢谢

Answer 1

一种方法是使用onChange的{​​{1}}回调

例如Checkbox component（以及您需要的任何参数）

，然后通过道具将其传递到父组件。

<Checkbox disableRipple onChange={(e)=> onCheckboxChange(e.event.target) />

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