在VScode中使用文檔時出錯

Question

我正在使用React，我想在componentDidMount中使用document.querySelector。

我編寫的代碼可以在瀏覽器中正確運行。

這是我的代碼：

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

e.key可以顯示在瀏覽器中。 但是VScode只是表明這是錯誤的。 剛剛在componentDidMount()和componentDidUnMount()顯示的問題。 它說對象可能是“ null”。 我想知道如何取消此錯誤。

Answer 1

您以錯誤的方式使用它，React使用處理程序來知道某個事件發生時該怎么辦。 事件可能是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);

希望有幫助！！！