当我在React中使用UseState更改类名时，汉堡菜单不起作用

Question

我正在为一个网站创建一个导航栏，一切都很好，当你改变屏幕大小时，汉堡菜单也很好。然而，当用户滚动时，我也修复了导航栏。

当你滚动到顶部时，汉堡菜单运行良好，但一旦你开始滚动，汉堡就不会点击。

如果我将"false"的初始状态更改为"true"，它将按相反的顺序工作。。所以它在顶部时不起作用，但在滚动时起作用。

我一整天都在努力解决这个问题，也一直在努力寻找解决方案，但我做不到。如果有人能帮助我，我将不胜感激。

导航栏代码：

function Navbar2() {
const [scrolled, setScrolled] = useState(false);
const canvasRef = useRef();
const navLinksRef = useRef();
const liRefAbout = useRef();
const liRefServices = useRef();
const liRefGallery = useRef();
const liRefTestimonials = useRef();
const liRefContact = useRef();
// toggle mobile menu on icon click
useEffect(() => {
const burger = canvasRef.current;
const nav = navLinksRef.current;
const aboutLink = liRefAbout.current;
const servicesLink = liRefServices.current;
const galleryLink = liRefGallery.current;
const testimonialsLink = liRefTestimonials.current;
const contactLink = liRefContact.current;
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
aboutLink.classList.toggle('list-about-active');
servicesLink.classList.toggle('list-services-active');
galleryLink.classList.toggle('list-gallery-active');
testimonialsLink.classList.toggle('list-testimonials-active');
contactLink.classList.toggle('list-contact-active');
burger.classList.toggle('toggle');
});
}, [scrolled]);
// make navbar fixed on scroll
const handleScroll = () => {
const offset = window.scrollY;
if (offset > 80) {
setScrolled(true);
} else if (offset < 80) {
setScrolled(false);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
});
let x = ['navbar'];
if (scrolled) {
x.push('scrolled');
}
return (
<nav className={`navbar ${scrolled ? 'scrolled' : ''}`}>
........

导航栏CSS

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 8vh;
background: transparent;
transition: all 0.4s linear;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 900;
}
.scrolled {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(6px);
width: 100%;
}

Answer 1

这里可以对很多东西进行代码优化。

useEffect(() => {
const burger = canvasRef.current;
const nav = navLinksRef.current;
const aboutLink = liRefAbout.current;
const servicesLink = liRefServices.current;
const galleryLink = liRefGallery.current;
const testimonialsLink = liRefTestimonials.current;
const contactLink = liRefContact.current;
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
aboutLink.classList.toggle('list-about-active');
servicesLink.classList.toggle('list-services-active');
galleryLink.classList.toggle('list-gallery-active');
testimonialsLink.classList.toggle('list-testimonials-active');
contactLink.classList.toggle('list-contact-active');
burger.classList.toggle('toggle');
});
}, [scrolled]);

您不必每次都添加一个事件侦听器；滚动的"；已经改变。这只是一个不在乎什么是"；滚动的"；状态，但如果已单击该按钮，则添加一次事件侦听器是很好的。其次，您不需要将ref重新声明为常量，因为它们会指向同一个东西。

作为空数组的第二个参数将触发useEffecthook一次，

useEffect(() => {
const burger = canvasRef.current;
const nav = navLinksRef.current;
const aboutLink = liRefAbout.current;
const servicesLink = liRefServices.current;
const galleryLink = liRefGallery.current;
const testimonialsLink = liRefTestimonials.current;
const contactLink = liRefContact.current;
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
aboutLink.classList.toggle('list-about-active');
servicesLink.classList.toggle('list-services-active');
galleryLink.classList.toggle('list-gallery-active');
testimonialsLink.classList.toggle('list-testimonials-active');
contactLink.classList.toggle('list-contact-active');
burger.classList.toggle('toggle');
});
}, []);