React-Select Creatable组件：达最大选中数时禁新增输入但保留删除

核心思路 #

要实现「选中项满5个时禁止输入新内容，但允许删除已选项」，需要从输入控制和菜单残留样式修复两个维度入手：

1. 自定义Input组件，限制输入行为 #

通过重写components.Input，当选中项数量达到最大值时，给输入框添加readOnly属性——区别于disabled，readOnly仅禁止输入，不会影响已选项的删除交互：

const CustomInput = (props) => {
  const isReadOnly = props.value?.length === 5;
  return <components.Input {...props} readOnly={isReadOnly} />;
};

2. 修复MenuList隐藏后的残留线条问题 #

你之前直接返回null会导致菜单容器的基础样式残留（比如那条小线条），可以通过两种方式彻底解决：

• 方式一：控制菜单显隐
  直接通过menuIsOpen属性控制菜单是否渲染，当选中项满5个时强制关闭菜单：

  <CreatableSelect
    // 其他属性
    value={selectedValues}
    menuIsOpen={selectedValues.length < 5}
    components={{ MenuList: CustomMenuList, Input: CustomInput }}
  />
  

• 方式二：优化CustomMenuList
  不返回null，而是返回一个隐藏的空容器，避免样式残留：

  const CustomMenuList = (props) => {
    if (props.value?.length === 5) {
      return <div style={{ display: 'none' }} />;
    }
    return <components.MenuList {...props} />;
  };
  

完整示例代码 #

import CreatableSelect from 'react-select/creatable';
import { components } from 'react-select';
import { useState } from 'react';

const MAX_SELECTIONS = 5;

// 自定义输入组件
const CustomInput = (props) => {
  const isReadOnly = props.value?.length === MAX_SELECTIONS;
  return <components.Input {...props} readOnly={isReadOnly} />;
};

// 自定义菜单列表组件
const CustomMenuList = (props) => {
  if (props.value?.length === MAX_SELECTIONS) {
    return <div style={{ display: 'none' }} />;
  }
  return <components.MenuList {...props} />;
};

export default function MyMultiSelect() {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleChange = (newValues) => {
    setSelectedValues(newValues);
  };

  return (
    <CreatableSelect
      isMulti
      value={selectedValues}
      onChange={handleChange}
      components={{ Input: CustomInput, MenuList: CustomMenuList }}
      menuIsOpen={selectedValues.length < MAX_SELECTIONS}
      // 其他配置项（如placeholder、options等）
    />
  );
}

内容的提问来源于stack exchange，提问作者Fer-de-lance