如何在反應功能組件中使用 querySelectorAll() 添加或刪除 class

Question

如果我單擊任何列表項但代碼不起作用，我將嘗試添加或刪除活動的 class。 這是我的 function

    const list = document.querySelectorAll('.m-list') as NodeListOf<Element>

    function activeLink(this: any) {
        list.forEach((item) => item.classList.remove('active'))
        // list.forEach((item) => item.classList.add('active'))
        this.classList.add('active')
    }
    list.forEach(item => item.addEventListener('click', activeLink))

完整代碼 HTML

export default function MobileNavigation() {
    const list = document.querySelectorAll('.m-list') as NodeListOf<Element>

    function activeLink(this: any) {
        list.forEach((item) => item.classList.remove('active'))
        // list.forEach((item) => item.classList.add('active'))
        this.classList.add('active')
    }
    list.forEach(item => item.addEventListener('click', activeLink))



    return <div className='mobile-navigation'>
        <ul>
            <li className='m-list active'>
                <a href="#">
                    <span className='m-icon'><i className="fa-solid fa-house"></i></span>
                    <span className='m-text'>Home</span>
                </a>
            </li>
            <li className='m-list'>
                <a href="#">
                    <span className='m-icon'><i className="fa-solid fa-shop"></i></span>
                    <span className='m-text'>Shop</span></a>
            </li>
            <li className='m-list'>
                <a href="#"><span className='m-icon'><i className="fa-solid fa-store"></i></span>
                    <span className='m-text'>Vendors</span></a>
            </li>
            <li className='m-list'>
                <a href="#"><span className='m-icon'><i className="fa-solid fa-address-card"></i></span>
                    <span className='m-text'>About us</span></a>
            </li>
            <li className='m-list'>
                <a href="#"><span className='m-icon'><i className="fa-solid fa-headset"></i></span>
                    <span className='m-text'>Contact Us</span></a>
            </li>
            <div className="indicator"></div>
        </ul>
    </div>;
}

Answer 1

const list = document.querySelectorAll('.m-list') as NodeListOf<Element>

 function activeLink(e:any) {
        list.forEach((item) => item.classList.remove('active'))
        // list.forEach((item) => item.classList.add('active'))
        e.classList.add('active')
    }
 list.forEach(item => item.addEventListener('click', (e)=>activeLink(item)))

只需用您的代碼替換它……它現在就會開始工作。 我希望這可以幫助您解決問題:)