reactjs - 在 Reactjs 引导程序中选择导航栏时无法在导航栏上应用样式？

Question

当我从navbar. 当我单击它时，它只出现在导航选项卡上，但在页面打开时不会一直保留。我也使用了，useSate但当我尝试控制状态时它不会改变状态。

import React,{useState} from 'react';
import { Navbar,Container, Nav } from "react-bootstrap";
import {Link} from 'react-router-dom';

const NavbarComponent = () => {

const [activeTab1, setActiveTab1] = useState(false);
const [activeTab2, setActiveTab2] = useState(false);  
const [activeTab3, setActiveTab3] = useState(false);  
const [activeTab4, setActiveTab4] = useState(false);  

function handleHighlightTab(eventKey) {
    //alert(`selected ${eventKey}`)
    if(eventKey === '1'){
        setActiveTab1(true);
        setActiveTab2(false);
        setActiveTab3(false);
        setActiveTab4(false);
    }
    else if(eventKey === '2') {
        setActiveTab1(false);
        setActiveTab2(true);
        setActiveTab3(false);
        setActiveTab4(false);
    }
    else if(eventKey === '3') {
        setActiveTab1(false);
        setActiveTab2(false);
        setActiveTab3(true);
        setActiveTab4(false);
    }
    else if(eventKey === '4') {
        setActiveTab1(false);
        setActiveTab2(false);
        setActiveTab3(false);
        setActiveTab4(true);
    }

     alert(`
             1 - ${activeTab1} \n 
             2 - ${activeTab2} \n
             3 - ${activeTab3} \n
             4 - ${activeTab4} ` 
        )

} 


return (
    <>
    <Navbar bg="dark" variant="dark" fixed="top">
        <Container>
            <Navbar.Brand href="/">Verticals</Navbar.Brand>
            <Nav className="me-auto" activeKey="" variant='pills' onSelect={handleHighlightTab}>
            <Nav.Item>
                <Nav.Link
                    href="/grocery"
                    eventKey="1"
                    style={ activeTab1? {border:'1px solid white' } : {}}
                >
                    Grocery
                </Nav.Link>
            </Nav.Item>
            <Nav.Link
                href="/fashion"
                eventKey="2"
                style={ activeTab2? {border:'1px solid white' } : {}}
            >
                Fashion
            </Nav.Link>
            <Nav.Link
                href="/footwear"
                eventKey="3"
                style={ activeTab3? {border:'1px solid white' } : {}}
            >
                Footwear
            </Nav.Link>
            <Nav.Link
                href="/beauty"
                eventKey="4"
                style={ activeTab4? {border:'1px solid white' } : {}}
            >
                Beauty
            </Nav.Link>
            </Nav>
        </Container>
        </Navbar>;
   

    
    </>
)
}

export default NavbarComponent;

我做错了吗？或者他们有什么改进的方法吗？

标签： reactjsreact-hooksevent-handlingnavbarreact-bootstrap