Javascript React-onKeyDown事件

我正在React中创建自己的lightbox，但我在实现keyDown事件时遇到问题。当我打开图像时，我希望图像-1有

a

键，图像+1有

d

键。我只实现了

console.log（e.key）

来检查所有功能是否正常工作。我发现了一个问题，我的按键事件只有在我关注左键或右键时才起作用。当我点击照片时，按键不起作用

灯箱：

<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>

---

这是正确的，因为事件键控已附加到元素。当您处理输入时，默认上下文会很有用。 当您需要全局事件时（当事件自上而下传播时），您可以依赖窗口对象或文档对象：

componentDidMount（）{
document.addEventListener（'keydown'，（事件）=>{
const keyName=event.key；
警报（'keydown事件\n\n'+'键：'+'键名）；
});
}
componentWillUnmount（）{
//卸载前请删除侦听器
}

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