Как хранить значения флажков, используя localStorage? (Реагируют + крючки) - PullRequest
Новая
       26

Как хранить значения флажков, используя localStorage? (Реагируют + крючки)

1 голос
/ 06 октября 2019

Вот мой 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>
  );
};

Буду признателен за любые предложения или указания, как решить эту проблему. Thx

1 Ответ

0 голосов
/ 06 октября 2019

Один из подходов состоит в том, чтобы использовать onChange обратный вызов Checkbox component

например, <Checkbox disableRipple onChange={(e)=> onCheckboxChange(e.event.target) /> (и любые параметры, которые вам нужны)

и передать его вашему родительскому компонентучерез опору, например,

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

Затем вы можете сохранить значение в локальном хранилище родительского компонента. Там может быть более элегантный подход

...