Javascript ReactJs-悬停时链接下拉列表应单独打开

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

问题是：

当我将鼠标悬停在“主页”上时，状态也会激活“服务”，它们都会打开下拉列表。我只希望：当我在“主页”上悬停时，“链接一”和“链接二”出现，当我在“服务”上悬停时，“链接三”和“链接四”出现。。。 现在，当我将鼠标悬停在“服务”上时，状态将以相同的方式同时更改为“家”。两个下拉列表同时出现

你有什么想法吗

我应该创建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>
   )

  }

const头=（）=>{
const[menuHoverActive，setMenuHoverActive]=useState（false）
const handleHoverOnMouseCenter=（）=>{
setMenuHoverActive（真）
}
constHandleHoverOnMouseLeave=（）=>{
setMenuHoverActive（假）
}
返回(


家
{MENUH过度活跃(


链接一


链接二


) : (
''
)}


服务
{MENUH过度活跃(


链接三


链接四


) : (
''
)}


)
}

您的状态只能保存两个可能的值：

true

（悬停）或

false

（不悬停）。你想要（至少）三分之一。徘徊在家里，2。将鼠标悬停在服务和3上。也不在上面徘徊

---

一种可能的方法是按住

“home”

或

“services”

表示悬停状态，例如，按住空字符串

“

表示不悬停在任何位置上。

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

解决方案： 使用动态变量处理悬停：

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> )}

const头=（）=>{
const[menuHoverActive，setMenuHoverActive]=useState（{}）
常量handleHoverOnMouseCenter=（参数）=>{
setMenuHoverActive（{[param]：true}）；
}
常量handleHoverOnMouseLeave=（参数）=>{
setMenuHoverActive（{[param]：false}）；
}
返回(


HandleHoverOnMouseCenter（'home'）}
onMouseLeave={（）=>handleHoverOnMouseLeave（'home'）}
className=“”
to=“/”
>
家
{menuHoverActive&&menuHoverActive.home(


链接一


链接二


) : (
''
)}


HandleHoverOnMouseCenter（'services'）}
onMouseLeave={（）=>handleHoverOnMouseLeave（'services'）}
className=“”
to=“/”
>
服务
{menuHoverActive&&menuHoverActive.services(


链接三


链接四


) : (
''
)}


)}

希望这对您有所帮助。。您也可以在上面的链接中尝试结果。。