Javascript HandleKeyPress无法识别向下箭头

我正在使用React.js构建一个定制的、可访问的

select

input。我需要使

向上

和

向下

箭头键起作用，因为

选项卡

键将在

选择

输入的

选项

的范围内

我在元件上有一个

handleKeyPress

功能，可以检测何时按下其他键（例如

'Enter'

工作正常）

下面是一个示例

选项

：

<li
  className="oc-select-field__item"
  tabIndex="0"
  onClick={handleClick}
  onKeyPress={handleKeyPress}
>

---

按下

向下

箭头时，我没有成功检测到的错误是什么？

事件。哪个

将为您提供键的数值

event.key

和

event.code

将为您提供一个字符串值

试试这个工具：

正如@devserkan所提到的，您应该使用

onKeyDown

而不是

onKeyPress

按下某个键时，会触发keydown事件。与keypress事件不同，keydown事件针对产生字符值的键和不产生字符值的键触发。

---

对于箭头键，我认为您需要

onKeyDown

而不是

onKeyPress

类应用程序扩展了React.Component{
handleKeyPress=（事件）=>{
如果（event.key==“箭头向下”）{
console.log（“按下箭头键启动”）；//不启动
}
如果（event.key==“输入”）{
console.log（“回车键已激发”）；//是否激发
}
};
render（）{
返回(

福


);
}
}
render（，document.getElementById（“根”））

您正在混合不同的
键盘事件
属性。您可以在此处看到不同类型键盘事件的不同属性及其值：请记住，一些旧浏览器使用了一些非标准代码，因此，例如，左侧通常是
'LeftArrow'
，右侧是
'righarrow'
，但在IE和Legacy Edge上，它们将显示为
'Left'
和
'Right'
。另外，看一看。我将很快添加有关此类跨浏览器不兼容的信息！请记住，一些旧浏览器使用了一些非标准代码，因此，例如，左侧通常是
'LeftArrow'
，右侧是
'RightArrow'
，但在IE和旧版边缘上，它们将显示为
'left'
和
'right'
。另外，看一看。我将很快添加有关此类跨浏览器不兼容的信息！
handleKeyPress = event => {
  if (event.key === 40) {
    console.log('Down arrow key fired'); // does not fire
  }
  if (event.key === 'Enter') {
    console.log('Enter key fired'); // does fire
  }
};

if (event.key === 'ArrowDown') {
    console.log('Down arrow key fired');
}