Question

我有一个多复选框模式，可以过滤列表以显示用户，因此，当我单击复选框之一并提交时，列表将被过滤以仅显示与所选状态匹配的结果。这工作得很好，但是由于某种原因，当我过滤并返回模态以选择另一个选项时，我没有选择上一个（我应该选择），而且我也需要取消选中每个选择，以便我可以显示原始列表（不进行任何过滤）。

这是我的结果数组：

messages=[
{id:1, description:'abc', status:'SENT'},
{id:2, description:'hello', status:'CANCELLED'},
{id:1, description:'bye', status:'SENT'}];

这是我的状态数组：

const states = [
    {
      id: 1,
      label: "SENT",
      class: "checkbox",
    },
    { id: 2, label: "CANCELLED", class: "checkbox" },
    { id: 3, label: "EMITING", class: "checkbox" },
    {
      id: 4,
      label: "NULLED",
      class: "checkbox",
    },
    
  ];

这是我的复选框组件：

const filterOptions = states.map((option) => (
    <div key={option.label} className="mb-3">
      <Form.Check
        type={option.class}
        id={option.id}
        name={option.label}
        label={option.label}
        onChange={filterState}
      />
    </div>
  ));

这是我的filterState函数：

let items = [];
  const filterState = (event) => {
    const target = event.target;
    const value = target.name;

    if (target.checked) {
      items.push(value);
    } else {
      items.splice(value, 1);
    }
  };

items数组现在仅具有已选中复选框的标签，因此我可以使用它来过滤Submit上的结果：

const onSubmit = () => {
    event.preventDefault();
    event.stopPropagation();
    let search = filterMessagesByStatus(items);
    if (search.length > 0) {
      setData(search);
      setIsActive(true);
      setEmptySearch(false);
    } else {
      setIsActive(false);
      setEmptySearch(true);
    }

    setModalShowFilters(false);
  };

现在，我不知道为什么不保存以前选择的复选框，而且我也不知道什么是将列表恢复到原始状态的最佳方法（不进行过滤，不选中所有内容）。

有人可以帮我吗？

Answer 1

这是我为解决此问题所做的事情：

我在复选框中添加了此字段：

checked={option.checked}

我在这样的每个复选框中添加了一个新的钩子来控制检查状态：

const [state, setState] = useState({
    "0": false,
    "1": false,
    "2": false,
    "3": false,
    "4": false,
    "5": false,
    "6": false,
  });

在我的消息数组中添加此字段：

checked: state[0],

然后我稍微改变一下过滤功能，添加以下内容：

setState((s) => ({ ...s, [id]: !s[id] }));

所以知道我每次单击一个复选框时都会更新所有复选框的状态。

在React上使用多个复选框和钩子

1 个答案: