Javascript 如何使用localStorage存储复选框值？（反应钩）

这是我的

Todolist

组件，它包含一个

列表

，以及所有带有复选框和材质列表及复选框的列表项。传递了两个道具：

todo

和

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 TodoList=（{todos，deleteTodo}）=>{
返回(
{todo.map（（todo，index）=>(
{
deletetetodo（索引）；
}}
>
))}
);
};

我知道如何使用本地存储将TODO存储为数组，但不知道如何存储复选框值。有人能解释一下，我们的策略是什么

以下是主要的应用程序：

  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>
  );
}; 

常量初始值=（）=>{
const initialArray=localStorage.getItem（“todos”）；
返回JSON.parse（initialArray）；
};
const[todos，setTodos]=useState（initialValue）；
useffect（（）=>{
const json=json.stringify（todos）；
setItem（“todos”，json）；
});
返回(
待办事项
{
const trimmedText=todoText.trim（）；
如果（trimmedText.length>0）{
setTodos（[…todos，trimmedText]）；
}
}}
/>
{
const newTodos=todos.filter（（u，index）=>index！==todoIndex）；
setTodos（newTodos）；
}}
/>
);
}; 

---

如果您有任何建议或指导，以及如何解决这个问题，我将不胜感激。Thx

一种方法是使用

复选框组件的
onChange
回调

e、 g.
onCheckboxChange（例如event.target）/>
（以及您需要的任何参数）

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

const-TodoList=（{todos，deleteteTodo，onCheckboxChange}）=>{

然后可以将该值存储在父组件的本地存储中。
可能有一种更优雅的方法
一种方法是使用
Checkbox组件的
onChange
回调

e、 g.
onCheckboxChange（例如event.target）/>
（以及您需要的任何参数）

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

const-TodoList=（{todos，deleteteTodo，onCheckboxChange}）=>{

然后可以将该值存储在父组件的本地存储中。
可能有一种更优雅的方法
你必须使复选框有状态。像对待TODO一样，将状态设置为localStorage。顺便问一下，你需要复选框的功能是什么Hello，@Pavan.checkbox是为了标记已经完成的TODO。但是使复选框有状态-意味着额外的useState？或者是可以将其存储在todos状态中，如下所示：todos=[{text:'Todo1'，选中：'true/false'}，{text:'Todo1'，选中：'true/false'}]对吗？我更喜欢后一种方法。因为它是todo项本身的状态。它应该只在todo对象中。你可以有一个完整的键：true/false并将其用于复选框。你必须使复选框有状态。将状态序列化为localStorage，就像对待todo一样。顺便问一句，你需要复选框做什么ConctionalityHello，@Pavan.Checkbox是标记完成的TODO所必需的。但是使复选框有状态-意味着额外的useState？或者可以像这样将其存储在TODO状态中：todos=[{text:'Todo1'，checked:'true/false'}，{text:'Todo1'，checked:'true/false'}]对吗？我更喜欢后一种方法。因为这是todo项本身的状态。它应该只在todo对象中。您可以有一个键isCompleted:true/false并将其用于复选框。