React - событие нажатия клавиши сначала срабатывает на теле, а затем на элементе

Question

Я внедряю некоторый код, который создает текстовый ввод в существующие страницы на inte rnet.

На некоторых сайтах, когда пользователь нажимает определенные клавиши c, в то время как фокусируется на моем текстовом вводе, событие захватывается, а не всплывает.

Я пробовал несколько решений для предотвратить это, но они, похоже, не работают:

  keyUp = event => {
    event.preventDefault();
    event.nativeEvent.stopImmediatePropagation();
    event.stopPropagation();
    return false;
  };

<Form.Control
            as="textarea"
            onChange={this.updateInput}
            onKeyUp={this.keyUp}
            onKeyPress={this.keyUp}
            onKeyDown={this.keyUp}
          />

Есть ли способ, которым я могу предотвратить запуск этого события на теле вместо того, чтобы сначала вызывать его в моем элементе?

Answer 1

React присоединяет свой прослушиватель событий к body по умолчанию и использует его для запуска своих собственных SyntheticEvent

. Вы можете попробовать присоединить ваше событие в режиме захвата, добавив Capture к своему имени события, как указано здесь

Редактировать (добавлено для пояснения к комментарию): прикрепить событие к вашему окну:

window.addEventListener("keydown", function (evt) {
  if (evt.target.id === 'elementID') {
    //do what you want to, here.
    //if you want to prevent the event propagating:
    evt.stopImmediatePropagation();
    evt.stopPropagation();
  }
}, true);

в вашем jsx:

...
<input id='elementID' />
...

Answer 2

Я добавил слушателя на уровне window, чтобы зафиксировать событие и предотвратить распространение вниз. Конечно, если слушатель уже добавлен на уровне window, это не будет работать:

window.addEventListener("keydown", this.keyDown, true);