React - KeyBoard在ul li列表上导航

import KeyBoard from 'keyboard-library';

state = {
  selectedIndex: 0
};

render() {
  const { selectedIndex } = this.state;
  const listItems = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {listItems.map((item, index) => (
        <li
          key={index}
          onKeyDown={event => this.handleKeyDown(event, index)}
          tabIndex={0}
          style={{ background: selectedIndex === index ? 'yellow' : 'white' }}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}

handleKeyDown(event, index) {
  const { selectedIndex } = this.state;
  let nextIndex;

  switch (event.key) {
    case 'ArrowUp':
      nextIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;
      break;
    case 'ArrowDown':
      nextIndex = selectedIndex < listItems.length - 1 ? selectedIndex + 1 : selectedIndex;
      break;
    default:
      return;
  }

  this.setState({ selectedIndex: nextIndex });
}