三行代码 › 专栏 › 技术社区 › 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;

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

5 月前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

5 月前

Anaya Ammar · 渲染后未显示的值

5 月前

matin kahrizi · 当我的状态更改时,useSelector不更新

5 月前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

5 月前

Zemelon · -moz背面可见性不适用于顺风css

5 月前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

5 月前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

5 月前

Mark C. · 制作一个可松开的单选按钮[关闭]

5 月前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

5 月前