Как повесить обработчик событий onkeypress на body в react.js?

Пользователь

от jeremy_larkin , в категории: JavaScript , 7 месяцев назад

Как повесить обработчик событий onkeypress на body в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от pauline , 7 месяцев назад

@jeremy_larkin 

Чтобы повесить обработчик событий onkeypress на тег <body> в React, нужно сделать следующее:

  1. Импортируйте React и создайте компонент:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        // Ваше содержимое здесь
      </div>
    );
  }
}


  1. Создайте метод handleKeyPress, который будет обрабатывать событие нажатия клавиши:
1
2
3
handleKeyPress = (event) => {
  console.log('Key pressed');
}


  1. В методе componentDidMount() повесьте обработчик события на тег <body>:
1
2
3
componentDidMount() {
  document.body.addEventListener('keypress', this.handleKeyPress);
}


  1. В методе componentWillUnmount() уберите обработчик события, чтобы предотвратить утечку памяти:
1
2
3
componentWillUnmount() {
  document.body.removeEventListener('keypress', this.handleKeyPress);
}


  1. Вставьте компонент в DOM:
1
ReactDOM.render(<App />, document.getElementById('root'));


После этого вы можете проверить, что обработчик события работает, нажимая клавиши на странице.