代码之家 › 专栏 › 技术社区 › Devmix

如何在new Map()中保存状态?

typescript reactjs javascript

Devmix · 技术社区 · 2 年前

我有三组(A组、B组和C组)。每个组都有复选框。现在,我正在使用一个名为 checkbox状态 存储选定的选项,效果很好,但如何将选定的值存储在 新建映射() 而不是一个简单的物体? 有人能给我指正确的方向吗?

当用户点击复选框时,这是我想要的地图。如果用户每个组选择一个以上的复选框,只需将其添加到阵列中即可。

{
  "Group A": [{label: "Mike", value: "mike"}],
  "Group B": [{label: "Laura", value: "laura"}],
  "Group C": [{label: "Paul", value: "paul"}],
}

这是我的作品 DEMO

const handleCheckboxChange = (field, isChecked) => {
    const key = `${post.label}_${field.label}`;
    setCheckboxStates((prevState) => ({
      ...prevState,
      [key]: isChecked
    }));
  };

1 回复 | 直到 2 年前

Unmitigated 2 年前

您可以更新 handleCheckboxChange 函数来使用 Map 就像这样:

setCheckboxStates((prevState) => {
  const next = new Map(prevState);
  next.set(post.label,
    isChecked ? [...(next.get(post.label) ?? []), { label: field.name, value: field.value }]: 
    next.get(post.label)?.filter((o) => o.label !== field.name)
  );
  return next;
});

然后,在映射字段时,更改是否选中复选框的检查方式:

const isChecked = checkboxStates.get(post.label)?.some((o) => o.label === field.name) ?? false;

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前