如何在React-Select中显示"已选X个选项"而非展示选中项？

一、自定义选中项显示，展示"X个选项已选中" #

React-select支持通过自定义ValueContainer组件覆盖默认的选中项展示逻辑，你可以设置阈值，当选中项数量超过阈值时切换为数量提示：

import Select from 'react-select';
import { useState } from 'react';

const CustomValueContainer = ({ children, selectProps }) => {
  const { value } = selectProps;
  // 设定阈值，比如选中项超过2个时显示数量
  if (value.length > 2) {
    return <div className="custom-value-container">{value.length}个选项已选中</div>;
  }
  // 数量少于等于阈值时，保留默认选中项展示
  return <div className="custom-value-container">{children}</div>;
};

// 调用示例
const MultiSelect = () => {
  const [selected, setSelected] = useState([]);
  const options = [/* 你的选项列表 */];

  return (
    <Select
      isMulti
      value={selected}
      onChange={setSelected}
      options={options}
      components={{ ValueContainer: CustomValueContainer }}
    />
  );
};

可以给custom-value-container添加CSS样式，保持和默认组件一致的视觉风格。

二、外部过滤器管理（受控输入实现） #

React-select支持通过受控属性接管过滤逻辑，无需手动搭建独立系统：

import Select from 'react-select';
import { useState } from 'react';

const FilterableSelect = () => {
  const [selected, setSelected] = useState([]);
  const [filterText, setFilterText] = useState('');
  const options = [/* 你的选项列表 */];

  // 可选：自定义过滤逻辑
  const filteredOptions = options.filter(option => 
    option.label.toLowerCase().includes(filterText.toLowerCase())
  );

  return (
    <div>
      {/* 外部过滤输入框 */}
      <input
        type="text"
        value={filterText}
        onChange={(e) => setFilterText(e.target.value)}
        placeholder="输入关键词过滤"
      />
      <Select
        isMulti
        value={selected}
        onChange={setSelected}
        options={filteredOptions}
        inputValue={filterText}
        onInputChange={setFilterText}
        // 关闭组件内部过滤，完全使用外部逻辑
        filterOption={() => true}
      />
    </div>
  );
};

通过inputValue同步外部过滤值到组件，onInputChange同步组件内部输入状态到外部，结合自定义的filteredOptions即可完全控制过滤逻辑。

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