react-select下拉框如何将选中项设为列表首位，是否有原生支持？

react-select 没有提供专门的 props 直接开启「已选选项固定顶部」的开关，但可以通过官方提供的sortOptions属性轻松实现该效果，属于官方支持的自定义扩展能力。

效果示例：已选中的Green选项固定排在列表第一位

实现方法 #

1. 核心API说明 #

react-select 暴露的sortOptions回调函数用于自定义下拉选项的排序逻辑，我们可以在该回调中优先返回已选中的选项，实现置顶效果。

2. 单选场景示例代码 #

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

const options = [
  { value: 'ocean', label: 'Ocean', color: '#00B8D9' },
  { value: 'green', label: 'Green', color: '#36B37E' },
  { value: 'purple', label: 'Purple', color: '#6554C0' },
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState(null);

  // 自定义排序逻辑
  const sortSelectedFirst = (options) => {
    return [...options].sort((a, b) => {
      // 已选中项优先级最高
      const aSelected = a.value === selectedOption?.value;
      const bSelected = b.value === selectedOption?.value;
      
      if (aSelected && !bSelected) return -1;
      if (!aSelected && bSelected) return 1;
      // 非选中项默认按label字母排序，可自行修改排序规则
      return a.label.localeCompare(b.label);
    });
  };

  return (
    <Select
      value={selectedOption}
      onChange={setSelectedOption}
      options={options}
      sortOptions={sortSelectedFirst}
    />
  );
}

3. 多选场景适配 #

如果是多选模式，只需修改判断逻辑，校验当前选项是否存在于已选数组中即可：

const [selectedOptions, setSelectedOptions] = useState([]);

const sortSelectedFirst = (options) => {
  return [...options].sort((a, b) => {
    const aSelected = selectedOptions.some(opt => opt.value === a.value);
    const bSelected = selectedOptions.some(opt => opt.value === b.value);
    
    if (aSelected && !bSelected) return -1;
    if (!aSelected && bSelected) return 1;
    return a.label.localeCompare(b.label);
  });
};

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