如何使用箭头键从输入字段导航到 ReactJS 可搜索自动完成列表？

Question

使用这个codepen，我想在下拉项中添加向上和向下箭头的功能。

为此，我想我需要从列表的第一项中删除 activeSuggestion className（可能通过在索引中使用 -1 或其他），直到用户按下向下箭头。当发生这种情况时，我还想从输入字段中移除焦点并将其带到列表中的第一项。

期望的功能：

• 用户输入“A”自动完成，过滤掉一些项目（焦点在输入字段中）
• 用户按下向下箭头，将焦点从输入字段带到“Alligator”。 Alligator 现在是“activeSuggestion”并突出显示。
• 用户向上箭头，将焦点带回输入字段。鳄鱼不再突出显示。

我尝试弄乱索引、主动建议和用户输入值（+1、0、-1）。这个片段来自我的codepen

  onKeyDown = (e) => {
    const { activeSuggestion, filteredSuggestions } = this.state;

    // User pressed the enter key
    if (e.keyCode === 13) {
      this.setState({
        activeSuggestion: 0,
        userInput: filteredSuggestions[activeSuggestion]
      });
    }
    // User pressed the up arrow
    else if (e.keyCode === 38) {
      if (activeSuggestion === 0) {
        return;
      }

      this.setState({ activeSuggestion: activeSuggestion - 1 });
    }
    // User pressed the down arrow
    else if (e.keyCode === 40) {
      if (activeSuggestion - 1 === filteredSuggestions.length) {
        return;
      }

      this.setState({ activeSuggestion: activeSuggestion + 1 });
    }
  };

感谢您的帮助 - 我非常感谢任何反馈！