使用箭头键

Question

我有一个聊天应用程序，用户可以从聊天输入栏发出斜杠命令。一些聊天应用程序做了类似的事情，但Slack是一个众所周知的例子。

目前，用户可以输入/或.，并在输入栏上方显示一个弹出窗口，显示所有可用命令。此弹出窗口基本上是<div>，<ul>。通过api调用填充<li>个项目。然后，用户可以通过单击<li>项来选择命令。

我希望能够使用向上/向下箭头键完成并选择命令。怎么办呢？

Answer 1

您可以使用React的SyntheticEvent来监听键盘输入。 https://facebook.github.io/react/docs/events.html#keyboard-events

假设您从API中获取了一系列选项，您可以在点击向上/向下箭头时遍历该数组，并保持光标的位置处于组件的状态。

在render方法中，您可以添加一个类，以根据数组上的光标显示活动项。