[英]How can I add or remove class using react functional component
I am using react typescript. I am trying to add or remove an active class if I click any list item but the code is sometimes not working .我正在使用 React typescript。如果我单击任何列表项,我会尝试添加或删除活动的 class,但代码有时无法正常工作。 So I want to update my code in a better way.
所以我想以更好的方式更新我的代码。 can anyone help me to improve update my below function code?
任何人都可以帮助我改进更新我下面的 function 代码吗?
Here is my function which I want to update这是我要更新的 function
const list = document.querySelectorAll('.m-list') as NodeListOf<Element>
function activeLink(e: any) {
list.forEach((item) => item.classList.remove('active'))
e.classList.add('active')
}
list.forEach(item => item.addEventListener('click', (e) => activeLink(item)))
Full code with HTML完整代码 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>;
}
Your code is pure VanillaJS, not Typescript or React.您的代码是纯 VanillaJS,而不是 Typescript 或 React。 Try to read something about Typescript AND React, make example project and try - https://medium.com/codex/typescript-and-create-react-app-11bdebcbf763
尝试阅读有关 Typescript 和 React 的内容,制作示例项目并尝试 - https://medium.com/codex/typescript-and-create-react-app-11bdebcbf763
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.