关于react-select的排序需求：能否将已选选项置顶并按字母排序？

当然可以实现！react-select提供了足够灵活的自定义能力，完全能满足你的需求，下面给你两种具体的实现方案：

方案一：仅将已选选项置顶 #

通过sortOptions属性自定义排序逻辑，判断选项是否被选中，让已选的排在列表最前面，未选的保持原有顺序（或默认排序规则）：

import Select from 'react-select';

const options = [
  { value: 'banana', label: 'Banana' },
  { value: 'apple', label: 'Apple' },
  { value: 'orange', label: 'Orange' },
  { value: 'grape', label: 'Grape' },
];

const sortOptions = (optionA, optionB, selectedOptions) => {
  // 判断当前选项是否在已选列表中
  const isASelected = selectedOptions.some(opt => opt.value === optionA.value);
  const isBSelected = selectedOptions.some(opt => opt.value === optionB.value);

  // 已选选项优先排在前面，未选选项保持原顺序
  if (isASelected && !isBSelected) return -1;
  if (!isASelected && isBSelected) return 1;
  return 0;
};

function MyMultiSelect() {
  return (
    <Select
      isMulti
      options={options}
      sortOptions={sortOptions}
    />
  );
}

方案二：已选选项置顶+按字母顺序排序 #

在置顶逻辑的基础上，给已选选项内部增加字母排序规则，未选选项也可同步按字母排序（按需调整）：

import Select from 'react-select';

const options = [
  { value: 'banana', label: 'Banana' },
  { value: 'apple', label: 'Apple' },
  { value: 'orange', label: 'Orange' },
  { value: 'grape', label: 'Grape' },
];

const sortOptions = (optionA, optionB, selectedOptions) => {
  const isASelected = selectedOptions.some(opt => opt.value === optionA.value);
  const isBSelected = selectedOptions.some(opt => opt.value === optionB.value);

  // 先处理置顶逻辑
  if (isASelected && !isBSelected) return -1;
  if (!isASelected && isBSelected) return 1;

  // 已选/未选内部按label的字母顺序排序
  return optionA.label.localeCompare(optionB.label);
};

function MySortedMultiSelect() {
  return (
    <Select
      isMulti
      options={options}
      sortOptions={sortOptions}
    />
  );
}

补充说明 #

• sortOptions函数的第三个参数就是当前已选中的选项数组，我们可以直接用它来判断选项的选中状态
• 如果是单选场景，逻辑类似，只需要判断option.value是否等于当前选中的value即可
• 要是需要更复杂的排序逻辑（比如结合自定义字段），只需要在排序函数里调整判断规则就可以了

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