在React类组件中如何获取HTML标签，querySelector取DOM为null怎么解决

• render方法执行时，你写在return里的JSX还未渲染挂载到浏览器真实DOM树，此时调用document.querySelectorAll查找DOM元素无法匹配到还未生成的节点，所以返回空结果。
• 直接操作原生DOM绑定事件不符合React的设计逻辑，容易出现事件重复绑定、内存泄漏等问题。

推荐优先使用React内置的合成事件绑定方式，无需手动操作DOM，实现起来更简洁：

import { Component } from "react";

class AddPass extends Component {
  // 定义按钮点击的处理逻辑
  handleBtnClick = () => {
    const inputVal = document.getElementById('addPass').value
    // 在这里补充你需要的业务逻辑，比如生成密码、写入newPass节点等
    console.log('按钮触发，输入框值为：', inputVal)
  }

  render(){
    return <div>
        <h1>Password generator</h1>
        <input type="password" id='addPass'></input>
        {/* 直接通过onClick属性绑定合成事件 */}
        <button className="btn1" onClick={this.handleBtnClick}></button>
        <div className="newPass"></div>
    </div>
  }
}
export default AddPass

如果确实有需求要使用原生addEventListener绑定事件，可以在组件挂载完成的生命周期钩子componentDidMount中执行DOM查找和事件绑定，同时要在组件卸载前解绑事件避免内存泄漏，实现代码如下：

import { Component } from "react";

class AddPass extends Component {
  handleBtnClick = () => {
    console.log('按钮被点击')
  }

  componentDidMount() {
    // 组件挂载到真实DOM后再查找元素绑定事件
    const btn1 = document.querySelector('.btn1')
    if (btn1) {
      btn1.addEventListener('click', this.handleBtnClick)
    }
  }

  componentWillUnmount() {
    // 组件卸载前解绑事件，清理内存
    const btn1 = document.querySelector('.btn1')
    if (btn1) {
      btn1.removeEventListener('click', this.handleBtnClick)
    }
  }

  render(){
    return <div>
        <h1>Password generator</h1>
        <input type="password" id='addPass'></input>
        <button className="btn1"></button>
        <div className="newPass"></div>
    </div>
  }
}
export default AddPass

内容的提问来源于stack exchange，提问作者GDTyka