反应，从另一个函数访问componentDidMount中定义的变量

Question

I am trying to build a responsive drop down navbar in React and have come to a roadblock. I have these variables defined in componentDidMount

 componentDidMount = () => { let nav = document.getElementById("topNav") let main = document.getElementById("main") let menu = document.getElementsByClassName("menuitems") let close = document.getElementById("closeBtn") nav.style.height = "50px"; main.style.marginTop = "50px"; for (let i = 0; i < menu.length; i++) { menu[i].style.marginTop = "100px"; }; close.addEventListener("click", function () { const menuIcon = close.children; for (let i = 0; i < menuIcon.length; i++) { menuIcon[i].classList.toggle("active"); } }); } 

and I am attempting to access them in an onClick function on the same react component here

 navToggle = () => { console.log(this.nav) } 

the variable is logged as undefined.

So, my question, how can I access variables that are defined in the compnentDidMount?

thank you

Answer 1

Variabled defined within the scope of componentDidMount will stay within that function itself. You need to assign them to the class instance like

componentDidMount = () => {
    this.nav = document.getElementById("topNav")
    this.main = document.getElementById("main")
    this.menu = document.getElementsByClassName("menuitems")
    this.close = document.getElementById("closeBtn")


    this.nav.style.height = "50px";
    this.main.style.marginTop = "50px";
    for (let i = 0; i < menu.length; i++) {
        this.menu[i].style.marginTop = "100px";
    };

    this.close.addEventListener("click", function () {
        const menuIcon = this.close.children;
        for (let i = 0; i < menuIcon.length; i++) {
            menuIcon[i].classList.toggle("active");
        }
    });
}