ReactJs - 悬停时链接下拉菜单应单独打开

Question

我缩短了代码，但逻辑是一样的。

问题是：

当我将鼠标悬停在“主页”上时，“服务”的状态也会激活，并且它们都会打开下拉菜单。我只想这样：当我将鼠标悬停在“主页”上时，会出现“链接一”和“链接二”，当我将鼠标悬停在“服务”上时，会出现“链接三”和“链接四”...... 现在，当我将鼠标悬停在“服务”上时，“家”的状态会以同样的方式同时发生变化。并且它们的两个下拉菜单同时出现...

你有什么想法吗？

为了更清楚，我应该创建 fiddle 还是 codepen 示例？

const Header = () => {
 const [menuHoverActive, setMenuHoverActive] = useState(false)

 const handleHoverOnMouseEnter = () => {
    setMenuHoverActive(true)
 }

 const handleHoverOnMouseLeave = () => {
    setMenuHoverActive(false)
 }

   return (
    <nav className="">
                    <ul className="xl:inline-flex xl:flex-row xl:ml-auto xl:w-auto w-full xl:items-center items-start flex flex-col xl:h-auto">
                        <li className="relative">
                            <Link
                                onMouseEnter={handleHoverOnMouseEnter}
                                onMouseLeave={handleHoverOnMouseLeave}
                                className=""
                                to="/"
                            >
                                Home
                            </Link>
                            {menuHoverActive ? (
                                <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                                    <li className="">
                                        <Link className="" to="/">
                                            Link One
                                        </Link>
                                    </li>
                                    <li className="">
                                        <Link className="" to="/">
                                            Link Two
                                        </Link>
                                    </li>
                                </ul>
                            ) : (
                                ''
                            )}
                        </li>
                        <li className="relative">
                            <Link
                                onMouseEnter={handleHoverOnMouseEnter}
                                onMouseLeave={handleHoverOnMouseLeave}
                                className=""
                                to="/"
                            >
                                Services
                            </Link>
                            {menuHoverActive ? (
                                <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                                    <li className="">
                                        <Link className="" to="/">
                                            Link Three
                                        </Link>
                                    </li>
                                    <li className="">
                                        <Link className="" to="/">
                                            Link Four
                                        </Link>
                                    </li>
                                </ul>
                            ) : (
                                ''
                            )}
                        </li>
                    </ul>
                </nav>
   )

  }

Answer 1

在您的代码中，您尝试使用一个布尔变量来处理多个菜单悬停。但这是不可能的。所以看看下面的解决方案，我用一个对象来管理它。

解决方案：

使用动态变量来处理悬停：

const Header = () => {
 const [menuHoverActive, setMenuHoverActive] = useState({})

 const handleHoverOnMouseEnter = (param) => {
    setMenuHoverActive({[param]: true });
 }

 const handleHoverOnMouseLeave = (param) => {
    setMenuHoverActive({[param]: false });
 }

   return (
    <nav className="">
       <ul className="xl:inline-flex xl:flex-row xl:ml-auto xl:w-auto w-full xl:items-center items-start flex flex-col xl:h-auto">
           <li className="relative">
              <Link
                  onMouseEnter={() => handleHoverOnMouseEnter('home')}
                  onMouseLeave={() => handleHoverOnMouseLeave('home')}
                  className=""
                   to="/"
               >
                  Home
               </Link>
              
               {menuHoverActive && menuHoverActive.home ? (
                  <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                      <li className="">
                         <Link className="" to="/">
                            Link One
                         </Link>
                       </li>
                       <li className="">
                          <Link className="" to="/">
                             Link Two
                          </Link>
                        </li>
                   </ul>
                ) : (
                    ''
            )}
        </li>
        <li className="relative">
           <Link
              onMouseEnter={() => handleHoverOnMouseEnter('services')}
              onMouseLeave={() => handleHoverOnMouseLeave('services')}
              className=""
              to="/"
            >
              Services
           </Link>
           {menuHoverActive && menuHoverActive.services ? (
             <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                <li className="">
                   <Link className="" to="/">
                      Link Three
                   </Link>
                </li>
                <li className="">
                   <Link className="" to="/">
                      Link Four
                   </Link>
                </li>
             </ul>
          ) : (
             ''
         )}
      </li>
   </ul>
</nav> )}

Answer 2

您的状态只能包含两个可能的值：true（悬停）或false（未悬停）。您想要（至少）三个：1. 悬停在主页上，2. 悬停在服务上，3. 不悬停在任何一个上。

一种可能的方法是保持"home" 或"services" 用于悬停状态，例如，一个空字符串"" 用于不悬停任何状态。