javascript - 如何使用 localStorage 存储复选框值？ ( react +钩子(Hook))

Question

这是我的 Todolist 组件，其中包含一个 List 以及带有复选框以及 Material 列表和复选框的所有列表项。传递了两个 props: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 Checkbox component的回调

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

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

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

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