反应 - onKeyDown 事件

Question

我在 React 中创建自己的灯箱，但我在实现 keyDown 事件时遇到了问题。当我打开图像时，我想要图像 - 1 的键 a 和图像 + 1 的 d 键。我只实现了 console.log(e.key) 来检查是否一切正常。我发现了一个问题，即我的 KeyDown 事件仅在我将注意力集中在左侧或右侧按钮上时才有效。当我点击照片键时不起作用。

灯箱：

<div 
  onKeyDown={this.nextButtonImage} 
  onClick={this.closeLightbox} 
  className="lightbox-container">
  <div className="lightbox">
    <button onClick={this.closeLightbox} className="lg-close">
      <i className="fas fa-times" />
    </button>
    <button onClick={this.prevImage} className="lg-arrows lg-left">
      <i className="fas fa-caret-left" />
    </button>
    <button onClick={this.nextImage} className="lg-arrows lg-right">
      <i className="fas fa-caret-right" />
    </button>
    <img src={this.images[this.state.openImage].url} alt="" />
  </div>
</div>

keyDown 事件：

nextButtonImage = (e) => {
  console.log(e.key);
}

Answer 1

这是正确的，因为事件 keydown 附加到一个元素。当您使用输入时，默认上下文会恢复有用。当您需要全局事件时（随着事件的传播 top/down），您可以依赖 window 对象或文档对象：

componentDidMount(){
  document.addEventListener('keydown', (event) => {
    const keyName = event.key;
    alert('keydown event\n\n' + 'key: ' + keyName);
  });
}

componentWillUnmount(){ 
  // Remove the listener before unmount
}

反应 - onKeyDown 事件

React - onKeyDown event

html

javascript

lightbox

reactjs