Как правильно работать с событиями клавиатуры на странице React SPA?

Question

[Павел Диденко]

Мне необходимо реализовать функционал отмены действия на странице при нажатии пользователем комбинации Ctrl + Z.
Как правильно с этим работать? В документации по этому поводу ничего не нашел.
Везде описаны способы работы только через передачу параметра в конкретный компонент, а мне нужно работать со страницей.

В своем функциональном компоненте, для получения события, я сделал так:

document.onkeypress = keyPress;

const keyPress = e => console.log(e);

Правильно ли так работать в React?

Answer 1

[0xD34F]

useEffect(() => {
  const onKeypress = e => console.log(e);

  document.addEventListener('keypress', onKeypress);

  return () => {
    document.removeEventListener('keypress', onKeypress);
  };
}, []);

Comments

[Павел Диденко]

Пробовал такой вариант, при этом событие отправляется в консоль 2 раза. Значения не меняются, то есть по факту срабатывает 1 раз, но логирует 2 раза. Это не ошибка?

[0xD34F]

Павел Диденко,

логирует 2 раза

Чё-то я вам как-то не верю. Докажите свои слова - сделайте соответствующий пример в песочнице.

[Павел Диденко]

0xD34F,
Магия какая-то. Если ваш код в песочницу вставить - то и логирует 1 раз и выводит объект с 2мя свойствами. https://codesandbox.io/s/suspicious-easley-7q3h3

UPD: в консоли браузера все норм, это в консоли песочницы обрезанный объект

Если в своем компоненте на локальном сервере делаю, то выводит 2 раза и полноценный объект priscree.ru/img/6e89078baab639.jpg

[Павел Диденко]

0xD34F Все, разобрался в чем ошибка, спасибо

Answer 2

[Владимир]

Ты можешь посадить обработчик на документ в самом компоненте но, если обработчик события используется только в этом компоненте то тебе нужно при монтировании компонента подписаться на событие, при отмонтировании - отписаться
https://reactjs.org/docs/state-and-lifecycle.html
Если компонент - класс, то можно использовать методы жизненного цикла componentDidMount и componentWillUnmount
Если компонент функциональный - используй Effect Hook, только внимательно читай https://reactjs.org/docs/hooks-effect.html#tip-opt...

Ну и в довершение
https://developer.mozilla.org/en-US/docs/Web/API/E...
https://developer.mozilla.org/en-US/docs/Web/API/E...