如何限制Material UI React多选菜单的最大选择数为3个？

要给Material UI的多选Select组件添加最多选择3个选项的限制，只需从修改选中逻辑和优化用户交互提示两方面入手：

1. 限制选中逻辑（核心） #

修改handleChange函数，判断当前已选数量是否达到3个：如果已选满3个且当前点击的是未选中的选项，则不执行添加操作；否则正常更新选中列表。

假设你的selectedLocations是通过props从父组件传入，且父组件提供了更新选中值的回调（比如onSelectedChange），示例代码如下：

const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
  const newValue = event.target.value as string[];
  // 已选满3个，且当前要添加新选项时，阻止更新
  if (selectedLocations.length >= 3 && newValue.length > selectedLocations.length) {
    return;
  }
  // 调用父组件的回调更新选中值
  onSelectedChange(newValue);
};

2. 优化用户体验：禁用超出限制的选项 #

当已选数量达到3个时，将未选中的MenuItem设置为禁用状态，让用户直观知道无法继续选择：

修改MenuItem的渲染逻辑，添加disabled属性：

{locationList.map((location: string, index: number) => {
  const isSelected = selectedLocations.includes(location);
  return (
    <MenuItem
      key={index}
      value={location}
      style={getStyles(location, selectedLocations, theme2)}
      // 已选满3个且当前选项未选中时，禁用
      disabled={selectedLocations.length >= 3 && !isSelected}
    >
      {location}
    </MenuItem>
  );
})}

完整修改后的组件代码 #

<FormControl sx={{ m: 2, width: "100%" }}>
  <InputLabel id="demo-multiple-chip-label">Location</InputLabel>
  <Select
    labelId="demo-multiple-chip-label"
    id="demo-multiple-chip"
    multiple
    value={selectedLocations}
    onChange={handleChange}
    input={<OutlinedInput label="Location" />}
    renderValue={(selected) => (
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
        {selected.map((value) => (
          <Chip key={value} label={value} />
        ))}
      </Box>
    )}
    MenuProps={MenuProps}
  >
    {locationList.map((location: string, index: number) => {
      const isSelected = selectedLocations.includes(location);
      return (
        <MenuItem
          key={index}
          value={location}
          style={getStyles(location, selectedLocations, theme2)}
          disabled={selectedLocations.length >= 3 && !isSelected}
        >
          {location}
        </MenuItem>
      );
    })}
  </Select>
</FormControl>

这样既实现了最多选3个的限制，又通过禁用选项给了用户明确的交互反馈，避免无效操作。

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