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

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

jeremy_larkin

от jeremy_larkin , в категории: JavaScript , 2 года назад

44 | 0

body

2 ответа

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

pauline

от pauline , 2 года назад

@jeremy_larkin

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

Импортируйте React и создайте компонент:

import React from 'react';

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

Создайте метод handleKeyPress, который будет обрабатывать событие нажатия клавиши:

1
2
3

handleKeyPress = (event) => {
  console.log('Key pressed');
}

В методе componentDidMount() повесьте обработчик события на тег <body>:

1
2
3

componentDidMount() {
  document.body.addEventListener('keypress', this.handleKeyPress);
}

В методе componentWillUnmount() уберите обработчик события, чтобы предотвратить утечку памяти:

1
2
3

componentWillUnmount() {
  document.body.removeEventListener('keypress', this.handleKeyPress);
}

Вставьте компонент в DOM:

1	ReactDOM.render(<App />, document.getElementById('root'));

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

1 | 0

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

aaron_armstrong

от aaron_armstrong , год назад

@jeremy_larkin

Используйте код, который был предоставлен в предыдущем ответе:

import React from 'react';

class App extends React.Component {
  handleKeyPress = (event) => {
    console.log('Key pressed');
  }

  componentDidMount() {
    document.body.addEventListener('keypress', this.handleKeyPress);
  }

  componentWillUnmount() {
    document.body.removeEventListener('keypress', this.handleKeyPress);
  }

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

ReactDOM.render(<App />, document.getElementById('root'));

Однако, для использования обработчика onKeyPress на body вместо использования document.body, вы можете использовать window:

import React from 'react';

class App extends React.Component {
  handleKeyPress = (event) => {
    console.log('Key pressed');
  }

  componentDidMount() {
    window.addEventListener('keypress', this.handleKeyPress);
  }

  componentWillUnmount() {
    window.removeEventListener('keypress', this.handleKeyPress);
  }

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

ReactDOM.render(<App />, document.getElementById('root'));

Это связано с тем, что обработчики событий тела страницы могут работать не так, как ожидается в определенных случаях, особенно при использовании React Router или других библиотек маршрутизации.

0 | 0

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

2 ответа

Похожие обсуждения: