ReactJS: how using queryselector variable out a function-CodePudding

I'm using this code:

export default function Naviguation() {

const overBtnMenu = () => {
    const navBars = document.querySelectorAll('.nav-bars')
    for (let i = 0; i < navBars.length; i  ) {
        navBars[i].style.width = '40px'
    }
}

const outBtnMenu = () => {
    const navBars = document.querySelectorAll('.nav-bars')
    navBars[0].style.width = '20px'
    navBars[1].style.width = '30px'
    navBars[2].style.width = '20px'
}

return (
    <nav>
        <img src={img} className='nav-logo' alt="logo" />
        <div className='nav-btn-menu' onm ouseEnter={overBtnMenu} onm ouseLeave={outBtnMenu}>
            <span className='nav-barTop nav-bars'></span>
            <span className='nav-barMiddle nav-bars'></span>
            <span className='nav-barBottom nav-bars'></span>
        </div>
    </nav>
)

}

the code runs correctly but I want to use the variable "navBars" once time like this

export default function Naviguation() {

const navBars = document.querySelectorAll('.nav-bars')

const overBtnMenu = () => {
    for (let i = 0; i < navBars.length; i  ) {
        navBars[i].style.width = '40px'
    }
}

const outBtnMenu = () => {
    navBars[0].style.width = '20px'
    navBars[1].style.width = '30px'
    navBars[2].style.width = '20px'
}

return (
    <nav>
        <img src={img} className='nav-logo' alt="logo" />
        <div className='nav-btn-menu' onm ouseEnter={overBtnMenu} onm ouseLeave={outBtnMenu}>
            <span className='nav-barTop nav-bars'></span>
            <span className='nav-barMiddle nav-bars'></span>
            <span className='nav-barBottom nav-bars'></span>
        </div>
    </nav>
)

}

But the code doesn't run because it wrote on the console "navBars undefined..."

How using a variable out the function to using it into my function?

CodePudding user response：

In React you have the concept of useRef whenever you need to get the value of an actual DOM element.

Rewrite your component as below:

import { useEffect, useRef } from 'react';

export default function Navigation() {
  const navBarsRef = useRef(null);
  const navBars = navBarsRef.current;

  useEffect(() => {
    navBarsRef.current = document.querySelectorAll('.nav-bars');
  }, []);

  const overBtnMenu = () => {
    for (let i = 0; i < navBars.length; i  ) {
      navBars[i].style.width = '40px';
    }
  };

  const outBtnMenu = () => {
    navBars[0].style.width = '20px';
    navBars[1].style.width = '30px';
    navBars[2].style.width = '20px';
  };

  return (
    <nav>
      <img src={img} className="nav-logo" alt="logo" />
      <div className="nav-btn-menu" onm ouseEnter={overBtnMenu} onm ouseLeave={outBtnMenu}>
        <span className="nav-barTop nav-bars"></span>
        <span className="nav-barMiddle nav-bars"></span>
        <span className="nav-barBottom nav-bars"></span>
      </div>
    </nav>
  );
}

CodePudding user response：

I wrote your code:

import React, { useEffect, useRef } from 'react'; import img from "../../images/logo-sanimex.webp";

import "./Naviguation.css";

export default function Navigation() {
  const navBarsRef = useRef(null);
  const navBars = navBarsRef.current;

  useEffect(() => {
    navBarsRef.current = document.querySelectorAll('.nav-bars');
  }, []);

  const overBtnMenu = () => {
    for (let i = 0; i < navBars.length; i  ) {
      navBars[i].style.width = '40px';
    }
  };

  const outBtnMenu = () => {
    navBars[0].style.width = '20px';
    navBars[1].style.width = '30px';
    navBars[2].style.width = '20px';
  };

  return (
    <nav>
      <img src={img} className="nav-logo" alt="logo" />
      <div className="nav-btn-menu" onm ouseEnter={overBtnMenu} onm ouseLeave={outBtnMenu}>
        <span className="nav-barTop nav-bars"></span>
        <span className="nav-barMiddle nav-bars"></span>
        <span className="nav-barBottom nav-bars"></span>
      </div>
    </nav>
  );
}

But it's still not working :(

console.log shows:

    Uncaught TypeError: navBars is null
        overBtnMenu Naviguation.js:15

CodePudding user response：

I found the solution !! I just remove "null" from const navBarsRef = useRef() Thanks very much for helping

import "./Naviguation.css";

export default function Navigation() {
  const navBarsRef = useRef();
  const navBars = navBarsRef.current;

  useEffect(() => {
    navBarsRef.current = document.querySelectorAll('.nav-bars');
  }, []);

  const overBtnMenu = () => {
    for (let i = 0; i < navBars.length; i  ) {
      navBars[i].style.width = '40px';
    }
  };

  const outBtnMenu = () => {
    navBars[0].style.width = '20px';
    navBars[1].style.width = '30px';
    navBars[2].style.width = '20px';
  };

  return (
    <nav>
      <img src={img} className="nav-logo" alt="logo" />
      <div className="nav-btn-menu" onm ouseEnter={overBtnMenu} onm ouseLeave={outBtnMenu}>
        <span className="nav-barTop nav-bars"></span>
        <span className="nav-barMiddle nav-bars"></span>
        <span className="nav-barBottom nav-bars"></span>
      </div>
    </nav>
  );
}