如何在react-select多选组件中指定下拉打开时高亮的项

要实现启用isMulti={true}的多选组件打开下拉菜单时自动高亮已选中的选项，你可以通过手动控制focusedOption属性结合状态管理，覆盖组件默认的聚焦逻辑，具体实现步骤如下：

核心思路 #

react-select的多选组件默认打开菜单时会聚焦第一项，我们可以监听菜单打开状态，在菜单触发打开动作时，将focusedOption设置为当前已选中的选项，从而强制组件高亮指定项。

代码实现 #

import React, { useState, useEffect } from 'react';
import Select from 'react-select';

// 示例选项列表
const options = [
  { value: 'red', label: 'Red' },
  { value: 'orange', label: 'Orange' },
  { value: 'yellow', label: 'Yellow' },
  { value: 'green', label: 'Green' },
];

const CustomMultiSelect = () => {
  // 存储已选选项（因实际仅选一项，用单个对象存储）
  const [selectedOption, setSelectedOption] = useState(null);
  // 控制菜单展开/收起状态
  const [menuIsOpen, setMenuIsOpen] = useState(false);
  // 手动指定聚焦的选项
  const [focusedOption, setFocusedOption] = useState(null);

  // 菜单打开时，自动聚焦到已选选项
  useEffect(() => {
    if (menuIsOpen && selectedOption) {
      setFocusedOption(selectedOption);
    }
  }, [menuIsOpen, selectedOption]);

  // 处理选项变更（仅保留第一个选中项）
  const handleChange = (newValue) => {
    setSelectedOption(newValue[0] || null);
  };

  return (
    <Select
      options={options}
      isMulti={true}
      value={selectedOption ? [selectedOption] : []}
      onChange={handleChange}
      menuIsOpen={menuIsOpen}
      onMenuOpen={() => setMenuIsOpen(true)}
      onMenuClose={() => setMenuIsOpen(false)}
      focusedOption={focusedOption}
      // 可选：如果需要严格锁定高亮已选项，可禁用上下箭头的聚焦切换
      // onKeyDown={(e) => {
      //   if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
      //     e.preventDefault();
      //   }
      // }}
    />
  );
};

export default CustomMultiSelect;

关键说明 #

• focusedOption：该属性允许手动指定菜单中被蓝色高亮的选项，优先级高于组件默认的聚焦逻辑。
• useEffect监听逻辑：当菜单打开且存在已选选项时，立即将聚焦目标切换为已选项，覆盖默认的第一项高亮行为。
• 选中项处理：因为实际仅需选择一项，所以在handleChange中取选中数组的第一个元素，保持和单选组件一致的逻辑。

设置完成后，打开下拉菜单时若已有选中项，该选项会自动以蓝色高亮，和单选组件的表现完全一致。

内容的提问来源于stack exchange，提问作者Divide by Zero