React:如何使用向上/向下箭头选择滚动列表中的上一项/下一项，并使列表滚动以使所选元素保持在屏幕上

import React, { useState, useEffect } from 'react';

const ScrollableList = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'ArrowUp') {
        setSelectedIndex((prevIndex) => Math.max(prevIndex - 1, 0));
      } else if (event.key === 'ArrowDown') {
        setSelectedIndex((prevIndex) => prevIndex + 1);
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  useEffect(() => {
    const listElement = document.getElementById('scrollable-list');
    const selectedItem = document.getElementById(`item-${selectedIndex}`);

    if (listElement && selectedItem) {
      const listRect = listElement.getBoundingClientRect();
      const itemRect = selectedItem.getBoundingClientRect();

      if (itemRect.top < listRect.top) {
        listElement.scrollTop -= listRect.top - itemRect.top;
      } else if (itemRect.bottom > listRect.bottom) {
        listElement.scrollTop += itemRect.bottom - listRect.bottom;
      }
    }
  }, [selectedIndex]);

  return (
    <div id="scrollable-list" style={{ height: '300px', overflow: 'auto' }}>
      <ul>
        {items.map((item, index) => (
          <li
            key={index}
            id={`item-${index}`}
            style={{
              background: index === selectedIndex ? 'yellow' : 'transparent',
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ScrollableList;