reactjs - 如何启用 onKeyDown？

Question

我正在使用 React-date-picker API。当我在日历打开时按下键时，我没有得到任何反馈。当天点击工作正常。但是，在单击日历图标打开日历后按下键时，按下键事件不起作用。我无法退出。

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

onKeyDown = {onKeyDown}
onDayClick = {onDayClick}

Answer 1

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

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

~~~

<input onKeyDown={keyDownHandler} />

您应该注意分配的位置onKeyDown？是否可聚焦。因为某些元素div不会触发按键事件。有一种棘手的方法可以做你想做的事。在您的组件中输入一个display: hidden;输入并使用它触发键。