Document.getElementById ('id') in componentDidMount is null

problem description

in componentDidMount, document.getElementById ("id") is null

the environmental background of the problems and what methods you have tried

I try to use ref, to find undefined. in this.refs

related codes

componentDidMount() {
    const fullscreenBtn = document.getElementById("button");
    if (fullscreenBtn) {
      fullscreenBtn.addEventListener("click", () => {
        if (fullscreenBtn.requestFullscreen) {
          fullscreenBtn.requestFullscreen();
        } else if ( document.getElementById("video").msRequestFullscreen) {
          fullscreenBtn.msRequestFullscreen();
        } else if ( document.getElementById("video").mozRequestFullScreen) {
          fullscreenBtn.mozRequestFullScreen();
        } else if ( document.getElementById("video").webkitRequestFullscreen) {
          document.getElementById("video").webkitRequestFullscreen();
        }
      });  
}
}
<div 
  className = "play_img" 
  id="button"
  ref="button" 
  ref={(ref) => this.button = ref}
  onClick={handleClick}>
  <img src={require("./assets/play.png")}  />
</div>

React.js front-end lifecycle

Apr.19,2021

do not manipulate dom nodes in react . Do not manipulate the dom node in react . Do not manipulate the dom node in react .
if you remember this sentence, there will be no problem with what you said.

onClick event is written on the attribute. Find the element with e.target

if you want to operate the real dom, through refs in componentDidMount, you only need to write the code to get the refs in setTimeout, for example:

setTimeout(() => {
    console.log(this.refs.xxx);
});

Previous: How does spring boot use external aop??

Next: Nuxt reported an error 'disabled' of null' on the test server