React中如何基于带复选框的下拉菜单切换指定div的可见性

针对你用MUI带复选框的下拉菜单，需要单个控制对应h3标签显示隐藏的需求，不需要依赖CSS类映射，直接通过React状态判断就能高效实现，步骤如下：

• 调整初始状态：将personName的初始值设为names数组，默认全选所有选项，对应h3全部显示
• 修改h3渲染逻辑：只渲染personName数组中包含的名称，取消勾选的选项会自动从数组中移除，对应的h3就会隐藏

修改后的完整代码：

export default function MultipleSelectCheckmarks() {
  // 初始状态设为所有names，默认全选
  const [personName, setPersonName] = React.useState<string[]>(names);

  const handleChange = (event: SelectChangeEvent<typeof personName>) => {
    const {
      target: { value }
    } = event;
    setPersonName(
      typeof value === "string" ? value.split(",") : value
    );
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem key={name} value={name}>
              <Checkbox
                checked={personName.includes(name)} 
                inputProps={{ "aria-label": "controlled" }}
              />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      {/* 只渲染选中的名称对应的h3 */}
      {personName.map((name) => (
        <h3 key={name}>{name}</h3>
      ))}
    </div>
  );
}

关键修改说明：

1. 初始状态从空数组改为names，确保默认全选所有选项
2. 移除了Checkbox的defaultChecked，直接用personName.includes(name)判断选中状态，逻辑更统一
3. h3的渲染从遍历所有names改为遍历personName，自动只显示选中的名称对应的标签

这个方案完全利用React的状态管理实现，不需要额外的CSS类映射，逻辑清晰且高效，完美适配多元素的显示控制场景。

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