如何在反应中的选定元素上设置条件 class，切换将不起作用

Question

我有这个下拉菜单，我想如果我的菜单在 ul 之前有 arrow class 那么如果我点击那个父 li 菜单它会添加一个 class 在那个 showMenu 只有那个子菜单的 li 上。

这是代码：

 <ul className="nav-links" >
                    <li>
                        <a href="#">
                            <i className='bx bx-grid-alt'></i>
                            <span className="link_name">Dashboard</span>
                        </a>
                        <ul className="sub-menu blank">
                            <li><a className="link_name" href="#">Category</a></li>
                        </ul>
                    </li>
                    <li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}> // sub menu parent
                        <div className="iocn-link">
                            <a href="#">
                                <i className='bx bx-collection'></i>
                                <span className="link_name">Category</span>
                            </a>
                            <i className='bx bxs-chevron-down arrow'></i> // arrow class
                        </div>
                        <ul className="sub-menu">
                            <li><a className="link_name" href="#">Category</a></li>
                            <li><a href="#">HTML & CSS</a></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">PHP & MySQL</a></li>
                        </ul>
                    </li>
                    <li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}>// sub menu parent
                        <div className="iocn-link">
                            <a href="#">
                                <i className='bx bx-book-alt'></i>
                                <span className="link_name">Posts</span>
                            </a>
                            <i className='bx bxs-chevron-down arrow'></i> // arrow class
                        </div>
                        <ul className="sub-menu">
                            <li><a className="link_name" href="#">Posts</a></li>
                            <li><a href="#">Web Design</a></li>
                            <li><a href="#">Login Form</a></li>
                            <li><a href="#">Card Design</a></li>
                        </ul>
                    </li>
</ul>

我试过这种方式将点击处理程序 subMenuToggle 设置到父子菜单 li 如果有人点击那个 li 它将设置为 true 并且它会添加一个 class 'subMenu' 但是当我单击任何子菜单父项变为 true 并打开我拥有的所有子菜单。

 const [subMenu, setSubMenu] = useState(false)
    const subMenuToggle = () => {
        setSubMenu(!subMenu)
    }

有人能帮帮我吗？

Answer 1

我认为你做错了。您不需要那个子菜单状态，只需使用被点击的当前目标元素的 classList。

const subMenuToggle = (e)=>{
  e.currentTarget.classList.toggle('showMenu');
}

你的li应该是这样的：

/* you can provide any default className that 
this element must have beside that showMenu that you provide dynamically
*/
<li onClick={subMenuToggle} className=""> // sub menu parent
   <div className="iocn-link">
      <a href="#">
        <i className='bx bx-collection'></i>
          <span className="link_name">Category</span>
      </a>
      <i className='bx bxs-chevron-down arrow'></i> // arrow class
   </div>
   <ul className="sub-menu">
     <li><a className="link_name" href="#">Category</a></li>
     <li><a href="#">HTML & CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">PHP & MySQL</a></li>
   </ul>
</li>

如何在反应中的选定元素上设置条件 class，切换将不起作用

How can I set conditional class on the selected element in react, toggle will not work

javascript

css

reactjs

react-typescript