如何使汉堡菜单dissapear点击链接后反应滚动

Question

我正在尝试让我的汉堡菜单使用react滚动。它可以正常工作，但当我点击链接时，菜单不会消失。我试过下面的，但最糟糕的是。

import React from 'react';
// import nav data
import { navData } from '../data';
// import components
import Socials from './Socials';
import { Link} from "react-scroll";
import { useState } from 'react';
const NavMobile = () => {
// destructure nav data
const [isActive, setIsActive] = useState(true)
const { items } = navData;
return (


<nav className={`${isActive? "w-full h-full flex flex-col justify-evenly overflow-hidden" : ""}`}>
<ul className='flex flex-col justify-center items-center gap-y-6 py-6 mb-8'>
{items.map((item, index) => {
return (
<Link
activeClass="active"
to={item.href}
spy={true}
smooth={true}
offset={-70}
duration={500}
>
<li key={index} onClick={setIsActive(!isActive)}>
<a className='text-2xl font-primary uppercase' href={item.href} >
{item.name}

</a>
</li>
</Link>
);
})}
</ul>
<div className='text-2xl'>
<Socials />
</div>
</nav>


);
};
export default NavMobile;

我就是不知道出了什么问题

Answer 1

<nav>的条件类名不需要包装在模板文本${}中，而是如下所示

<nav className={isActive ? "w-full h-full flex flex-col justify-evenly overflow-hidden" : ""}>

onClick处理程序也应该有自己定义的函数。

const handleClick = () => {setIsActive(!isActive)}

然后解析为<li>的onClick方法

<li key={index} onClick={handleClick}>

请参阅https://bobbyhadz.com/blog/react-onclick-pass-event-and-parameter#:~：text=到%20传递%20一个%20事件%20，事件%20和%20参数%20到%20句柄单击%20。以获取更多帮助。这是必要的，因为您将函数解析为onClick方法，而不是函数的结果。