Я хочу добавить определенные стили к элементу панели навигации при нажатии на него

avatar
Jonathan
8 августа 2021 в 19:24
73
2
1

Я попробовал 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>
    )
}
Источник
evolutionxbox
8 августа 2021 в 19:29
0

Какое имя класса добавляется?

Ответы (2)

avatar
Miroslav Papírník
8 августа 2021 в 20:55
0

У вас один и тот же обработчик кликов для всех компонентов 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>
    )
}
Miroslav Papírník
8 августа 2021 в 21:02
0

1. Помните о className для ложных значений, проверьте инструмент проверки браузера. 2. Код не будет работать после обновления, вы должны установить значение по умолчанию из текущего хэша. (URL)

avatar
ckoala
8 августа 2021 в 20:43
0

Вместо логического значения в useState вы должны хранить идентификатор, уникальный для активированного NavLink.

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 для сохранения идентификатора навигационного списка, по которому был сделан щелчок, и доступа к этому идентификатору внутри clickHandler

.