wrong when using document in VScode

Question

I'm using React and I want to use document.querySelector in componentDidMount.

The code I wrote can run correctly in browser.

Here is my code:

  componentDidMount() {
    document.querySelector('#text').addEventListener('keyup', (e)=>{
      console.log(e.key);
    })
  }
  componentDidUnMount() {
    document.querySelector('#text').removeEventListener('keyup');
  }

e.key can be shown in browser. But VScode just shows it is error. Questions just showed in componentDidMount() and componentDidUnMount() . It says that object may be 'null'. I want to know how to cancel this error.

Answer 1

You are using it the wrong way, react uses handlers to know what to do when some event takes place. Event may be onChange, onKeyUp, onKeyDown.

Working example below for the functionality using React.

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  handleLoginKeyUp = e => {
    console.log(e.keyCode);
  };
  render() {
    return <input type="text" onKeyUp={this.handleLoginKeyUp} />;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Hope that helps!!!