如何让React Select选项菜单从选项数组指定索引处开始显示

要让React Select的下拉菜单打开时直接定位到选项数组的中间位置（而非默认顶部），可以通过组件实例结合DOM操作实现，具体步骤如下：

实现思路 #

1. 通过useRef获取React Select组件实例，访问内部的菜单列表DOM元素。
2. 监听菜单打开事件onMenuOpen，在菜单渲染完成后，找到目标索引对应的选项元素。
3. 调用DOM元素的scrollIntoView方法，将目标选项滚动到菜单容器的可视区域（居中显示），同时保留上下滚动的能力。

完整代码示例 #

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

const TimeSelector = () => {
  const selectRef = useRef(null);
  // 设置要定位的目标选项索引，示例中设为5（对应06:00）
  const targetOptionIndex = 5;

  const handleMenuOpen = () => {
    // 延迟执行确保菜单DOM已渲染完成
    setTimeout(() => {
      const menuList = selectRef.current?.menuList;
      // 校验目标索引是否在选项数组范围内
      if (menuList && targetOptionIndex < options.length) {
        const targetOption = menuList.children[targetOptionIndex];
        if (targetOption) {
          // 滚动到目标选项，居中显示
          targetOption.scrollIntoView({ 
            behavior: 'smooth', // 可选，平滑滚动效果
            block: 'center' 
          });
        }
      }
    }, 0);
  };

  const options = [
    { label: '04:45', value: '04:45' },
    { label: '05:00', value: '05:00' },
    { label: '05:15', value: '05:15' },
    { label: '05:30', value: '05:30' },
    { label: '05:45', value: '05:45' },
    { label: '06:00', value: '06:00' },
    { label: '06:15', value: '06:15' },
    { label: '06:30', value: '06:30' },
    { label: '06:45', value: '06:45' },
    { label: '07:00', value: '07:00' },
    { label: '07:15', value: '07:15' },
  ];

  return (
    <Select
      ref={selectRef}
      isRtl
      options={options}
      unstyled
      isSearchable={false}
      onMenuOpen={handleMenuOpen}
    />
  );
};

export default TimeSelector;

关键说明 #

• targetOptionIndex：修改这个值即可定位到任意选项，比如要定位到options[20]，直接将值改为20。
• scrollIntoView的参数：block: 'center'确保目标选项居中显示在菜单容器中，用户可以正常上下滚动查看首尾选项；behavior: 'smooth'是可选的平滑滚动效果，不需要的话可以改成'auto'。
• setTimeout的作用：确保菜单DOM已经完全渲染，避免找不到目标选项元素的问题。

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