Добавление слушателей событий
Метод componentDidMount() также является лучшим местом для присоединения любых прослушивателей событий, которые необходимо добавить для определенных функций. React предоставляет синтетическую систему событий, которая обертывает родную систему событий браузеров. Это означает, что синтетическая система событий ведет себя в разных браузерах одинаково, даже если родные события могут вести себя по-разному в разных браузерах. Вы уже использовали некоторые из этих синтетических обработчиков событий, таких как onClick(). Синтетическая система событий React отлично подходит для большинства взаимодействий, которые вы будете использовать для элементов DOM. Однако, если вы хотите присоединить обработчик событий к объектам документа или окна, вы должны сделать это напрямую.
Добавь слушатель событий в методе componentDidMount() для событий keydown и заставь эти события вызывать функцию обратного вызова handleKeyPress() . Вы можете использовать document.addEventListener() который принимает событие (в кавычках) в качестве первого аргумента и обратный вызов в качестве второго аргумента. Затем в componentWillUnmount() удалите этот же прослушиватель событий. Вы можете передать те же аргументы в document.removeEventListener() . Хорошей практикой является использование этого метода жизненного цикла для любой очистки компонентов React перед их размонтированием и уничтожением (в противном случае вы можете получить утечку памяти, лишние обработчики на элементах и много прочих неприятностей. Отнеситесь к этому с полной серьезностью). Удаление прослушивателей событий является примером одного из таких действий по очистке.