0

我正在使用Selectfrom开发下拉菜单rebass。当我使用键盘浏览页面时，当我来到下拉菜单并按空格键或回车时，我希望打开下拉菜单。我在下拉列表周围添加了一个 Box 容器，并且一个onKeyDown事件将直接通过 ref 获取 html 元素，并且在按下 enter 或空格时将打开下拉列表。这是它的外观：

<Box
onKeyDown={e => {
     if ((e.Key == "Enter" || e.keyCode == 32) && selectRef =! null && 
          selectRef.current != null) {
          selectRef.current.focus()
     }
   }}>
<Select ref={selectRef}>
....
</Select>
</Box>

当我使用 Tab 浏览页面时，如果我按 Enter，当焦点位于下拉菜单上时，下拉菜单会打开 - 它的工作方式与预期相同，但如果我按空格键，下拉菜单的焦点将丢失，并且下拉菜单没有打开。如果我在空间上按两次，下拉菜单会打开。有人可以帮我弄这个吗？为什么按一次空格键会失去焦点？还有另一种方法可以做到这一点（按一下空格打开下拉菜单）？

4

0 回答 0