如何让箭头键控制React自定义Autocomplete组件的滚动条上下滚动？

核心思路是在选中项切换时，主动让当前选中的列表项滚动到可视区域内，以下是具体实现方案：

方案一：使用React Refs（推荐） #

1. 在组件内创建Ref数组存储每个选项的DOM节点：

const optionRefs = useRef([]);

2. 渲染选项列表时，将每个<li>元素的Ref存入数组：

<ul className="options">
  {filteredOptions.map((option, index) => (
    <li
      key={option}
      ref={el => optionRefs.current[index] = el}
      className={index === activeIndex ? "active" : ""}
      onClick={() => handleSelect(option)}
      data-index={index}
    >
      {option}
    </li>
  ))}
</ul>

3. 监听activeIndex变化，触发滚动操作：

useEffect(() => {
  if (activeIndex !== -1 && optionRefs.current[activeIndex]) {
    optionRefs.current[activeIndex].scrollIntoView({ block: 'nearest' });
  }
}, [activeIndex, filteredOptions]);

这个方法无需额外处理异步更新问题，React会在activeIndex或filteredOptions变化时自动执行滚动逻辑，稳定性更高。

方案二：使用DOM选择器（快速实现） #

如果不想维护Ref数组，也可以通过元素的data-index属性直接定位节点：
同样借助useEffect监听选中索引变化：

useEffect(() => {
  if (activeIndex === -1) return;
  const activeItem = document.querySelector(`.options li[data-index="${activeIndex}"]`);
  activeItem?.scrollIntoView({ block: 'nearest' });
}, [activeIndex, filteredOptions]);

两种方案都利用了Element.scrollIntoView()方法，通过block: 'nearest'配置，确保选中项始终处于可视区域内，同时避免过度滚动导致的界面跳动。

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