Fatal编程技术网
  • javascript/
  • Javascript 选择<；李>；a<；ul>；使用箭头键弹出

Javascript 选择<；李>；a<；ul>；使用箭头键弹出

javascript reactjs

Javascript 选择<；李>；a<；ul>；使用箭头键弹出,javascript,reactjs,html-lists,Javascript,Reactjs,Html Lists,我有一个聊天应用程序，用户可以从聊天输入栏发出斜杠命令。一些聊天应用程序也有类似的功能，但Slack就是一个众所周知的例子 目前，用户可以输入/或，输入栏上方将显示一个弹出窗口，显示所有可用命令。此弹出窗口本质上是一个带有的。项通过api调用填充。然后，用户可以通过单击项来选择命令 我希望能够使用上/下箭头键浏览并选择一个命令。如何做到这一点？您可以使用React的SyntheticEvents来监听键盘输入。 假设您从API获得一个选项数组，那么当您点击向上/向下箭头时，您可以遍历该数组，并

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

目前，用户可以输入
/
或
，输入栏上方将显示一个弹出窗口，显示所有可用命令。此弹出窗口本质上是一个带有
的
。
    • 项通过api调用填充。然后，用户可以通过单击
    • 项来选择命令
    

    我希望能够使用上/下箭头键浏览并选择一个命令。如何做到这一点？
    您可以使用React的
    SyntheticEvent
    s来监听键盘输入。

    
假设您从API获得一个选项数组，那么当您点击向上/向下箭头时，您可以遍历该数组，并在组件状态下保持光标的位置
    
在render方法中，然后可以添加一个类以基于数组上的光标显示活动项