如何为基于Map存储状态的复选框通过默认选项数组设置默认值？

1. 初始化带默认值的Map状态 #

先写一个工具函数，把defaultOptions数组转换成符合需求的Map结构，默认将指定选项设为选中状态（若需要默认不选，把true改成false即可）：

const defaultOptions = [
    { label: "Mark", value: "mark" },
    { label: "Steve", value: "steve" },
    { label: "Paul", value: "Paul" }
];

const getDefaultCheckedMap = () => {
  const checkedMap = new Map<string, boolean>();
  defaultOptions.forEach(option => {
    // 将默认选项设为选中状态
    checkedMap.set(option.value, true);
  });
  return checkedMap;
};

在组件中用这个函数初始化状态：

const [checkedState, setCheckedState] = useState<Map<string, boolean>>(getDefaultCheckedMap());

2. 绑定复选框与Map状态 #

渲染复选框时，通过checkedState.get(option.value)获取默认选中状态，同时在onChange事件中更新Map：

// 分3个分区渲染复选框示例
<div className="section-1">
  <h3>分区1</h3>
  <label>
    <input
      type="checkbox"
      value="mark"
      checked={checkedState.get("mark") ?? false}
      onChange={(e) => {
        // 复制原Map并更新对应值，保证状态不可变
        const newMap = new Map(checkedState);
        newMap.set("mark", e.target.checked);
        setCheckedState(newMap);
      }}
    />
    Mark
  </label>
</div>

<div className="section-2">
  <h3>分区2</h3>
  <label>
    <input
      type="checkbox"
      value="steve"
      checked={checkedState.get("steve") ?? false}
      onChange={(e) => {
        const newMap = new Map(checkedState);
        newMap.set("steve", e.target.checked);
        setCheckedState(newMap);
      }}
    />
    Steve
  </label>
</div>

<div className="section-3">
  <h3>分区3</h3>
  <label>
    <input
      type="checkbox"
      value="Paul"
      checked={checkedState.get("Paul") ?? false}
      onChange={(e) => {
        const newMap = new Map(checkedState);
        newMap.set("Paul", e.target.checked);
        setCheckedState(newMap);
      }}
    />
    Paul
  </label>
</div>

优化：批量渲染复选框 #

如果分区仅为布局差异，可通过遍历批量生成并指定分区归属：

// 定义每个选项对应的分区
const optionSections = [
  { section: "分区1", value: "mark" },
  { section: "分区2", value: "steve" },
  { section: "分区3", value: "Paul" }
];

// 按分区分组选项
const groupedOptions = optionSections.reduce((acc, item) => {
  if (!acc[item.section]) acc[item.section] = [];
  acc[item.section].push(defaultOptions.find(opt => opt.value === item.value));
  return acc;
}, {} as Record<string, typeof defaultOptions>);

// 渲染分组后的复选框
{Object.entries(groupedOptions).map(([sectionName, options]) => (
  <div key={sectionName} className={`section-${sectionName}`}>
    <h3>{sectionName}</h3>
    {options.map(opt => (
      <label key={opt?.value}>
        <input
          type="checkbox"
          value={opt?.value}
          checked={checkedState.get(opt?.value!) ?? false}
          onChange={(e) => {
            const newMap = new Map(checkedState);
            newMap.set(opt?.value!, e.target.checked);
            setCheckedState(newMap);
          }}
        />
        {opt?.label}
      </label>
    ))}
  </div>
))}

内容的提问来源于stack exchange，提问作者Devmix