неправильно при использовании документа в VScode

Question

Я использую React и хочу использовать document.querySelector в componentDidMount.

Код, который я написал, может корректно работать в браузере.

Вот мой код:

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

e.key может отображаться в браузере. Но VScode просто показывает, что это ошибка. Вопросы только что появились в componentDidMount() и componentDidUnMount(). Он говорит, что объект может быть нулевым. Я хочу знать, как отменить эту ошибку.

Answer 1

Вы используете это неправильно, реагирует использует обработчики, чтобы знать, что делать, когда происходит какое-то событие.Событие может быть onChange, onKeyUp, onKeyDown.

Рабочий пример ниже для функциональности, использующей 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);

Надеюсь, что поможет !!!