如何启用onKeyDown？

Question

我使用的是React-date-picker API。当我在日历打开的时候按下键盘时，我得不到任何反馈。在Day click运行得很好。但是，当单击日历图标打开日历后按下按键时，按键事件不起作用。我不能注销。

const onKeyDown = (e: React.KeyboardEvent) => { 
  e.preventDefault 
  if (e.key === 'Enter') {
    console.log('works')    
  }    
}

onKeyDown = {onKeyDown}
onDayClick = {onDayClick}

Answer 1

您可以在相关位置触发每个事件，如keyDown事件。input、textarea等可聚焦元素的keyDown事件，如下所示：

const keyDownHandler = e => {
  e.preventDefault 
  if (e.key === 'Enter') {
    console.log('Enter key is pressed')    
  }
};

~~~

<input onKeyDown={keyDownHandler} />

您应该注意分配onKeyDown的位置？它是否可聚焦。因为像div这样的一些元素不会触发按键事件。而且有一种巧妙的方法来做你想做的事情。在您的组件中放置一个display: hidden;输入，并使用它来按下触发键。