@chrome123

Как обработать событие window или document в react js?

Есть небольшой код на react js
class Task extends  React.Component {

          constructor(props) {
              super(props);

              this.state = {
                  keyDown: false, // по умолчанию, игра остановлена
             
              }

          }
         editkeyDown = () =>{
              this.setState({keyDown:  this.state.keyDown ? false : true})

          }


          render() {

              return (

                      <div id="map"  className="Box">

                      </div>

              )
          }
      }

      const app = document.getElementById("example");
      ReactDOM.render(
              <div className="field">
                   <Task />
              </div>,
          app
      );


Как я хочу что бы в момент события

$(window).on("keydown", function(event){
      console.log(event);
  });


Изменялось значение this.state.keyDown
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
0xD34F
@0xD34F
onKeyDown = ({ key }) => {
  this.setState(() => ({
    keyDown: key,
  }));
}

componentDidMount() {
  document.addEventListener('keydown', this.onKeyDown);
}

componentWillUnmount() {
  document.removeEventListener('keydown', this.onKeyDown);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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