我想在单击导航栏元素时为其添加特定样式

Question

我尝试了UseState(false)，但它为所有其他导航栏元素添加了样式

import React, {useState } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle';

export default function Nav({openHandler}) {

    const [isActive, setIsActive] = useState(false);

    const clickHandler = () => {
        setIsActive(!isActive);
    }

    return (
        <Navbar>
            <NavContainer>
                <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo>
                <NavMobileIcon onClick={openHandler}>
                    <AiOutlineMenu />
                </NavMobileIcon>
                <NavLists>
                    <NavList onClick={clickHandler} className={isActive ? 'active' : ''}>
                        <NavLink to="#about">About</NavLink>
                    </NavList>
                    <NavList onCLick={clickHandler} className={isActive && 'active'}>
                        <NavLink to="#discover">Discover</NavLink>
                    </NavList>
                    <NavList onClick={clickHandler} className={isActive && 'active'}>
                        <NavLink to="#services">Services</NavLink>
                    </NavList>
                </NavLists>
                <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn>
            </NavContainer>
        </Navbar>
    )
}

Answer 1

您应该存储一个对已激活的 NavLink 唯一的标识符，而不是 useState 中的布尔值。

import React, {useState } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle';

export default function Nav({openHandler}) {

    const [isActive, setIsActive] = useState('');

    const clickHandler = (e) => {
        setIsActive((isActive) => isActive = e.currentTarget.id);
    }

    return (
        <Navbar>
            <NavContainer>
                <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo>
                <NavMobileIcon onClick={openHandler}>
                    <AiOutlineMenu />
                </NavMobileIcon>
                <NavLists>
                    <NavList onClick={clickHandler} id="about" className={isActive === 'about' && 'active'}>
                        <NavLink to="#about">About</NavLink>
                    </NavList>
                    <NavList onCLick={clickHandler} id="discover" className={isActive === 'discover' && 'active'}>
                        <NavLink to="#discover">Discover</NavLink>
                    </NavList>
                    <NavList onClick={clickHandler} id="services" className={isActive === 'services' && 'active'}>
                        <NavLink to="#services">Services</NavLink>
                    </NavList>
                </NavLists>
                <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn>
            </NavContainer>
        </Navbar>
    )
}

免责声明：此代码可能无法成功运行，因为我一开始没有运行它。这只是一个提示，可以引导您朝着正确的方向前进。

另一种方法是 useRef hoof，以便存储已单击的 NavList 的标识符并在 clickHandler 中访问该标识符

Answer 2

所有 NavList 组件都有相同的点击处理程序。因此，当您单击其中任何一个时，处理程序将切换 isActive 道具。由于所有 className 条件都使用相同的 isActive 道具，因此它将更改所有它们的类别。您必须弄清楚哪个被点击并处于活动状态。

import React, {useState } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle';

export default function Nav({openHandler}) {

    const [active, setActive] = useState('about'); // about is default value

    const clickHandler = (name) => () => {
        setActive(name);
    }

    return (
        <Navbar>
            <NavContainer>
                <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo>
                <NavMobileIcon onClick={openHandler}>
                    <AiOutlineMenu />
                </NavMobileIcon>
                <NavLists>
                    <NavList onClick={clickHandler('about')} className={active === 'about' ? 'active' : ''}>
                        <NavLink to="#about">About</NavLink>
                    </NavList>
                    <NavList onCLick={clickHandler('discover')} className={active === 'discover' && 'active'}>
                        <NavLink to="#discover">Discover</NavLink>
                    </NavList>
                    <NavList onClick={clickHandler('services')} className={active === 'services' && 'active'}>
                        <NavLink to="#services">Services</NavLink>
                    </NavList>
                </NavLists>
                <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn>
            </NavContainer>
        </Navbar>
    )
}