React - событие onKeyDown - PullRequest
Новая
       6

React - событие onKeyDown

0 голосов
/ 30 октября 2018

Я создаю свой собственный лайтбокс в React, и у меня есть проблема с реализацией события keyDown. Когда я открываю изображение, я хочу иметь ключ a для изображения - 1 и d ключ для изображения + 1. Я только реализовал console.log(e.key), чтобы проверить, все ли работает правильно. И я обнаружил проблему, что мое событие KeyDown работает только тогда, когда я фокусируюсь на кнопке влево или вправо. Когда я нажимаю на клавиши с фотографиями, они не работают.

Lightbox: 

<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 голосов
/ 30 октября 2018

Это правильно, потому что событие keydown прикреплено к элементу. Контекст по умолчанию возвращается, когда вы работаете со входами. Когда вам нужно глобальное событие (поскольку события распространяются сверху вниз), вы можете положиться на объект окна или объект документа: 

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

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