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

Question

[chrome123]

Есть небольшой код на 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

Answer 1

[0xD34F]

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

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

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