React Switch Toggle 标记已完成但不在 Todo 列表中的元素

Question

我正在使用 Switch Material UI 组件来过滤列表中已完成和未完成的任务。

我可以切换已完成的元素，但问题是当我切换时我无法切换回未完成（我无法重复使用我的整个任务数组来过滤）

方法

  const getCompleted = (e, value) => {
    let result = [];
    result = tasks.filter(({ completed }) => completed);
    setFilteredData(result);
    console.log(result);
  };

组件

  <FormControl component="fieldset">
    <FormControlLabel
      value="start"
      control={<Switch onChange={getCompleted} color="primary" />}
      label="Start"
      labelPlacement="start"
    />
  </FormControl>

Answer 1

您需要以某种方式处理 switch

的 checked 值

我不知道在初始位置是否需要显示所有值，但我的回答是基于那个 senario（不选中然后显示所有任务，否则只显示已完成）

  const getCompleted = (e, value) => {
    let result = [];
    result = e.target.checked
      ? tasks.filter(({ completed }) => completed)
      : tasks;
    setFilteredData(result);
  };

Answer 2

您似乎没有根据开关的值进行过滤。

const getCompleted = (e, value) => {
    let result = [];
    let switchValue = e.target.checked;
    result = tasks.filter(({ completed }) => completed === switchValue);
    setFilteredData(result);
    console.log(result);
  };

Answer 3

您需要在切换更改时调用的函数中检查切换值。

const getCompleted = (e, value) => {
    let result = [];
    result = value ? tasks.filter(({ completed }) => completed) : tasks;
    setFilteredData(result);
  };

查看更新后的 codesandbox

React Switch Toggle 标记已完成但不在 Todo 列表中的元素

React Switch Toggle to flag elements completed and not in Todo list

javascript

reactjs

material-ui

codesandbox

react-hooks