React-onKeyDown事件

时间:2018-10-30 13:57:02

标签: javascript html reactjs lightbox

我在React中创建自己的灯箱,实现keyDown事件有问题。当我打开图像时,我想要图像的密钥a-1和图像+ 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);
}

1 个答案:

答案 0 :(得分:2)

这是正确的,因为事件快捷键已附加到元素上。使用输入时,默认上下文会恢复有用。 当您需要全局事件(事件从上/下传播)时,可以依赖于窗口对象或文档对象:

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

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