ReactJs - 懸停時鏈接下拉菜單應單獨打開

Question

我縮短了代碼，但邏輯是一樣的。

問題是：

當我在“主頁”上使用 hover 時，state 也為“服務”激活，並且它們都打開了下拉菜單。 我只想這樣：當我在“主頁”上出現 hover 時，出現“鏈接一”和“鏈接二”，當我在“服務”上出現 hover 時，出現“鏈接三”和“鏈接四”......現在，當我 ZE0542F579DF8E8132ZADE6F在“服務”上，state 以相同的方式、相同的時間更改為“家”。 並且他們的兩個下拉菜單同時出現......

你有什么想法嗎？

為了更清楚，我應該創建小提琴或 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

在您的代碼中，您嘗試使用一個 Boolean 變量來處理多個菜單 hover。 但這是不可能的。 所以看看下面的解決方案，我用 object 管理它。

解決方案：

使用動態變量來處理懸停：

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

您的 state 只能保存兩個可能的值： true （懸停）或false （不懸停）。 您想要（至少）三個：1. 懸停在 Home 上，2. 懸停在 Services 上，3. 不懸停在任何一個上。

一種可能的方法是為懸停狀態保留"home"或"services" ，例如，為不懸停任何狀態保留一個空字符串"" 。