React带复选框的多选组件如何实现每行显示多个选项？

你的核心问题是给外层布局用的<div>加了value={options}属性，而Material-UI的Select组件会把所有直接子元素识别为可选项，导致它把整个子数组[a,b]当成了单个选项——选中该行里的任意选项时，组件都会匹配到外层div的value，返回整个子数组。

修复方案 #

不需要依赖二维数组嵌套来实现多行布局，直接用CSS布局（Flexbox）或Material-UI的Grid组件来控制每行显示的选项数量，同时移除外层容器的value属性，让MenuItem作为Select的直接可选项：

方案1：用Material-UI Grid组件实现每行2个选项

import { Grid, MenuItem, Checkbox, ListItemText } from '@mui/material';

// 假设原始选项是一维数组：const options = ['a', 'b', 'c', 'd'];
// 选中的选项状态：const [selectedOptions, setSelectedOptions] = useState([]);

<Select
  labelId="demo-multiple-checkbox-label"
  id="demo-multiple-checkbox"
  multiple
  value={selectedOptions}
  onChange={(e) => setSelectedOptions(e.target.value)}
  input={<OutlinedInput label="Tag" />}
  renderValue={(selected) => selected.join(', ')}
  MenuProps={MenuProps}
>
  <Grid container spacing={2}>
    {options.map((option) => (
      <Grid item xs={6} key={option}>
        <MenuItem value={option}>
          <Checkbox checked={selectedOptions.includes(option)} />
          <ListItemText primary={option} />
        </MenuItem>
      </Grid>
    ))}
  </Grid>
</Select>

方案2：用原生Flex布局（如果坚持用二维数组分组）

如果一定要用二维数组[[a,b],[c,d]]来分组，外层容器只做布局，不要加value属性：

<Select
  // 其他属性不变
>
  {array.map((rowOptions, rowIdx) => (
    <div 
      key={rowIdx} 
      style={{ display: 'flex', gap: '16px', marginBottom: '8px', width: '100%' }}
    >
      {rowOptions.map((option) => (
        <MenuItem key={option} value={option}>
          <Checkbox checked={selectedOptions.includes(option)} />
          <ListItemText primary={option} />
        </MenuItem>
      ))}
    </div>
  ))}
</Select>

关键注意点 #

1. 只有MenuItem需要设置value属性，它是Select唯一识别的可选项单元
2. 选中状态判断用selectedOptions.includes(option)比indexOf > -1更简洁准确
3. MenuItem的key要保证唯一，直接用选项值即可（避免伪代码里的name笔误）

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