React中点击NavButton组件时setCurrentActive函数未触发问题

你的问题在于NavButton组件没有处理父组件传入的onClick属性。当前NavButton内部的<li>只绑定了自己的changeName函数，完全没用到父组件传递的setCurrentActive，所以点击时自然不会触发这个函数。

修复方法 #

方法1：在内部点击事件中调用父组件的onClick #

修改NavButton的changeName函数，在状态更新后调用父组件传入的onClick（判断是否存在，避免无传入时报错）：

function NavButton(props) {
    const [name, setName] = useState(props.id === 1 ? "active" : "");

    function changeName() {
        setName(prev => prev === "" ? "active" : "");
        // 调用父组件的onClick
        props.onClick?.();
    }

    return (
        <li className={name} onClick={changeName}>
            {props.label}
        </li>   
    )
}

方法2：直接在li的onClick中同时执行两个函数 #

也可以直接在<li>的点击事件里同时触发内部状态更新函数和父组件的回调：

function NavButton(props) {
    const [name, setName] = useState(props.id === 1 ? "active" : "");

    function changeName() {
        setName(prev => prev === "" ? "active" : "");
    }

    return (
        <li 
            className={name} 
            onClick={() => {
                changeName();
                props.onClick?.();
            }}
        >
            {props.label}
        </li>   
    )
}

额外优化：统一控制激活状态（可选） #

你当前每个NavButton都自行管理激活状态，可能会出现多个按钮同时激活的情况。如果希望始终只有一个按钮处于激活状态，建议把激活状态提升到Navbar组件中统一管理，更符合React状态管理原则：

export default function Navbar() {
    const [activeId, setActiveId] = useState(1);

    function setCurrentActive(id) {
        console.log("works", id);
        setActiveId(id);
    } 
    
    return (
            <div className="Navbar" id="myNavBar">
            <img className="logo" src={logo} alt=''></img>
            <ul className="links" id="Links">
                <NavButton id={1} label="ACASĂ" isActive={activeId === 1} onClick={() => setCurrentActive(1)}/>
                <NavButton id={2} label="ACUSTICE" isActive={activeId === 2} onClick={() => setCurrentActive(2)}/>
                <NavButton id={3} label="CLASICE" isActive={activeId === 3} onClick={() => setCurrentActive(3)}/>
                <NavButton id={4} label="ELECTRICE" isActive={activeId === 4} onClick={() => setCurrentActive(4)}/>
            </ul>
            <a href="/" className="icon">
                <img src="../assets/png/menu.png" alt=""></img>
            </a>
            </div>
    );
}

function NavButton(props) {
    return (
        <li className={props.isActive ? "active" : ""} onClick={props.onClick}>
            {props.label}
        </li>   
    )
}

内容的提问来源于stack exchange，提问作者Lawrencium