How to handle window or document event in react js?

Question

React

There is a small code in 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
      );

How I want that at the time of the event

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

The value of this.state.keyDown was changed

Answer 1

onKeyDown = ({ key }) => {
  this.setState(() => ({
    keyDown: key,
  }));
}

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

componentWillUnmount() {
  document.removeEventListener('keydown', this.onKeyDown);
}