@Dasslier
FrontEnd Developer

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

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

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

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


Правильно ли так работать в React?
  • Вопрос задан
  • 4218 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
useEffect(() => {
  const onKeypress = e => console.log(e);

  document.addEventListener('keypress', onKeypress);

  return () => {
    document.removeEventListener('keypress', onKeypress);
  };
}, []);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ты можешь посадить обработчик на документ в самом компоненте но, если обработчик события используется только в этом компоненте то тебе нужно при монтировании компонента подписаться на событие, при отмонтировании - отписаться
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...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы