ReactJs -在悬停时，链接下拉菜单应该分开打开。

Question

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

问题是：

当我在“家”上盘旋时，国家也会启动“服务”，它们都会打开下拉列表。我只想这样:当我在“家”、“链接一”和“链接二”上盘旋时，当我在“服务”、“链接三”和“链接四”上盘旋时.现在，当我在“服务”上徘徊时，状态会以相同的方式、同一时间发生"home“的变化。两人的跌落同时出现..。

你有什么想法吗？

我应该创建小提琴或代码更清晰的例子吗？

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"，例如，一个空字符串""用于不悬停在任何状态上。