在React嵌套菜单上的悬停状态

huangapple
go评论117阅读模式
英文:

Hover states on React nested menu

问题

在以下代码中，我有一个嵌套菜单。在悬停时，我希望将 selected 类名称添加到 Nav.Item，并且仅在我悬停到另一个 Nav.Item 上时将其移除。我可以通过 onMouseOver 来实现这一点。不幸的是，它不会向任何子级 Nav.Item 添加 selected 类。

因此，要求如下：

  • 对于悬停在任何 nav.item 上，应添加 selected 类
  • 如果鼠标离开项目，则不要删除 selected 类
  • 当出现子菜单时，在 Nav.Item 上保留 selected 类
  • 只有在悬停到另一个相同级别的 Nav.Item 上时才移除 selected 类
  1. "use client"; 
  2.  
  3. import Nav from 'react-bootstrap/Nav'; 
  4. import Link from 'next/link'; 
  5.  
  6. import { getMenu } from '@/lib/APIs/menu'; 
  7. import { use, useEffect, useRef, useState } from 'react'; 
  8. import { usePathname } from 'next/navigation'; 
  9. import { Button, NavDropdown } from 'react-bootstrap'; 
  10.  
  11. const dataPromise = getMenu(); 
  12.  
  13. const GlobalNav = () => { 
  14.     const MENU = use(dataPromise); 
  15.     const [selectedItemId, setSelectedItemId] = useState<string | null>(null); 
  16.  
  17.     function handleItemHover(itemId: string) { 
  18.         setSelectedItemId(itemId); 
  19.     } 
  20.  
  21.     function renderMenuItems(menuItems: any[]) { 
  22.         return menuItems.map((item: any) => ( 
  23.             <Nav.Item 
  24.                 as='li' 
  25.                 key={item.id}    
  26.                 onMouseOver={() => handleItemHover(item.id)} 
  27.                 className={selectedItemId === item.id ? 'selected' : ''} 
  28.             > 
  29.                 <Nav.Link 
  30.                     as={Link} 
  31.                     href={item.url} 
  32.                 > 
  33.                     <span> 
  34.                         {item.title} 
  35.                     </span> 
  36.                 </Nav.Link> 
  37.                 {item.children && item.children.length > 0 && ( 
  38.                     <Nav as='ul'> 
  39.                         {renderMenuItems(item.children)} 
  40.                     </Nav> 
  41.                 )} 
  42.             </Nav.Item> 
  43.         )); 
  44.     } 
  45.  
  46.     return ( 
  47.         <Nav as='ul'> 
  48.             {renderMenuItems(MENU)} 
  49.         </Nav> 
  50.     ); 
  51. } 
  52.  
  53. export default GlobalNav;

希望有人能帮助您解决这个问题。

英文:

In the following code I have a nested menu. On hover I wanted to add selected class name to the Nav.Item and only remove it when I hover over another Nav.Item. I could achive that with onMouseOver. Unfortunately, it doesn't add selected class to any of the sub-level Nav.Item.

So the criterias would be:
for hover on any nav.item selected class should be added

  • don't remove selected class if mouse leaves the item
  • keep selected class on the Nav.Item when a child menu appears
  • remove selected class only, if hover over another Nav.Item but on the same level
  1. &quot;use client&quot;; 
  2.  
  3. import Nav from &#39;react-bootstrap/Nav&#39;; 
  4. import Link from &#39;next/link&#39;; 
  5.  
  6. import { getMenu } from &#39;@/lib/APIs/menu&#39;; 
  7. import { use, useEffect, useRef, useState } from &#39;react&#39;; 
  8. import { usePathname } from &#39;next/navigation&#39;; 
  9. import { Button, NavDropdown } from &#39;react-bootstrap&#39;; 
  10.  
  11. const dataPromise = getMenu(); 
  12.  
  13. const GlobalNav = () =&gt; { 
  14.     const MENU = use(dataPromise); 
  15.     const [selectedItemId, setSelectedItemId] = useState&lt;string | null&gt;(null); 
  16.  
  17.     function handleItemHover(itemId: string) { 
  18.         setSelectedItemId(itemId); 
  19.     } 
  20.  
  21.     function renderMenuItems(menuItems: any[]) { 
  22.         return menuItems.map((item: any) =&gt; ( 
  23.             &lt;Nav.Item 
  24.                 as=&#39;li&#39; 
  25.                 key={item.id}    
  26.                 onMouseOver={() =&gt; handleItemHover(item.id)} 
  27.                 className={selectedItemId === item.id ? &#39;selected&#39; : &#39;&#39;} 
  28.             &gt; 
  29.                 &lt;Nav.Link 
  30.                     as={Link} 
  31.                     href={item.url} 
  32.                 &gt; 
  33.                     &lt;span&gt; 
  34.                         {item.title} 
  35.                     &lt;/span&gt; 
  36.                 &lt;/Nav.Link&gt; 
  37.                 {item.children &amp;&amp; item.children.length &gt; 0 &amp;&amp; ( 
  38.                     &lt;Nav as=&#39;ul&#39;&gt; 
  39.                         {renderMenuItems(item.children)} 
  40.                     &lt;/Nav&gt; 
  41.                 )} 
  42.             &lt;/Nav.Item&gt; 
  43.         )); 
  44.     } 
  45.  
  46.     return ( 
  47.         &lt;Nav as=&#39;ul&#39;&gt; 
  48.             {renderMenuItems(MENU)} 
  49.         &lt;/Nav&gt; 
  50.     ); 
  51. } 
  52.  
  53. export default GlobalNav;

I hope someone can help with it.

答案1

得分: 1

请尝试以下代码：

  1. function hasSelectedChild(menuItem) {
  2.    return menuItem.children && menuItem.children.length > 0 && menuItem.children.find(item => item.id === selectedItemId || hasSelectedChild(item)) 
  3. }
  5. function renderMenuItems(menuItems) { 
  6.         return menuItems.map(item => ( 
  7.             <Nav.Item 
  8.                 as='li' 
  9.                 key={item.id}    
  10.                 onMouseOver={(e) => {
  11.                   e.stopPropagation();
  12.                   handleItemHover(item.id)
  13.                 }} 
  14.                 className={(hasSelectedChild(item) || selectedItemId === item.id) ? 'selected' : ''}
  15.             > 
  16.                 <Nav.Link 
  17.                     as={Link} 
  18.                     href={item.url} 
  19.                 > 
  20.                     <span> 
  21.                         {item.title} 
  22.                     </span> 
  23.                 </Nav.Link> 
  24.                 {item.children && item.children.length > 0 && ( 
  25.                     <Nav as='ul'> 
  26.                         {renderMenuItems(item.children)} 
  27.                     </Nav> 
  28.                 )} 
  29.             </Nav.Item> 
  30.         )); 
  31.     }

希望这有帮助。

英文:

Try this:

  1. function hasSelectedChild(menuItem) {
  2.    return menuItem.children &amp;&amp; menuItem.children.length &gt; 0 &amp;&amp; menuItem.children.find(item =&gt; item.id === selectedItemId || hasSelectedChild(item)) 
  3. }
  5. function renderMenuItems(menuItems: any[]) { 
  6.         return menuItems.map((item: any) =&gt; ( 
  7.             &lt;Nav.Item 
  8.                 as=&#39;li&#39; 
  9.                 key={item.id}    
  10.                 onMouseOver={(e) =&gt; {
  11.                   e.stopPropagation();
  12.                   handleItemHover(item.id)
  13.                 }} 
  14.                 className={(hasSelectedChild(item) || selectedItemId === item.id) ? &#39;selected&#39; : &#39;&#39;}
  15.             &gt; 
  16.                 &lt;Nav.Link 
  17.                     as={Link} 
  18.                     href={item.url} 
  19.                 &gt; 
  20.                     &lt;span&gt; 
  21.                         {item.title} 
  22.                     &lt;/span&gt; 
  23.                 &lt;/Nav.Link&gt; 
  24.                 {item.children &amp;&amp; item.children.length &gt; 0 &amp;&amp; ( 
  25.                     &lt;Nav as=&#39;ul&#39;&gt; 
  26.                         {renderMenuItems(item.children)} 
  27.                     &lt;/Nav&gt; 
  28.                 )} 
  29.             &lt;/Nav.Item&gt; 
  30.         )); 
  31.     }

答案2

得分: 1

为了实现在鼠标悬停在Nav.Item元素上时添加"selected"类，并在出现子菜单时保持该类，您可以按照以下方式修改代码：

  1. import Nav from 'react-bootstrap/Nav';
  2. import Link from 'next/link';
  3. import { getMenu } from '@/lib/APIs/menu';
  4. import { usePathname } from 'next/navigation';
  5. import { Button, NavDropdown } from 'react-bootstrap';
  7. const dataPromise = getMenu();
  9. const GlobalNav = () => {
  10.   const MENU = use(dataPromise);
  11.   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
  13.   function handleItemHover(itemId: string) {
  14.     setSelectedItemId(itemId);
  15.   }
  17.   function handleItemMouseLeave() {
  18.     setSelectedItemId(null);
  19.   }
  21.   function renderMenuItems(menuItems: any[]) {
  22.     return menuItems.map((item: any) => (
  23.       <Nav.Item
  24.         as='li'
  25.         key={item.id}
  26.         onMouseOver={() => handleItemHover(item.id)}
  27.         onMouseLeave={handleItemMouseLeave}
  28.         className={selectedItemId === item.id ? 'selected' : ''}
  29.       >
  30.         <Nav.Link as={Link} href={item.url}>
  31.           <span>{item.title}</span>
  32.         </Nav.Link>
  33.         {item.children && item.children.length > 0 && (
  34.           <Nav as='ul' className={selectedItemId === item.id ? 'selected' : ''}>
  35.             {renderMenuItems(item.children)}
  36.           </Nav>
  37.         )}
  38.       </Nav.Item>
  39.     ));
  40.   }
  42.   return (
  43.     <Nav as='ul'>
  44.       {renderMenuItems(MENU)}
  45.     </Nav>
  46.   );
  47. }
  49. export default GlobalNav;

在嵌套的Nav组件上添加了className属性，以在选定父级Nav.Item时添加"selected"类。并且添加了onMouseLeave={handleItemMouseLeave}事件处理程序到Nav.Item上，以触发selectedItemId的重置。

英文:

To achieve the desired behavior of adding the "selected" class to the Nav.Item elements on hover and keeping it when a child menu appears, you can modify the code as below:

  1. import Nav from &#39;react-bootstrap/Nav&#39;;
  2. import Link from &#39;next/link&#39;;
  3. import { getMenu } from &#39;@/lib/APIs/menu&#39;;
  4. import { usePathname } from &#39;next/navigation&#39;;
  5. import { Button, NavDropdown } from &#39;react-bootstrap&#39;;
  6. const dataPromise = getMenu();
  7. const GlobalNav = () =&gt; {
  8. const MENU = use(dataPromise);
  9. const [selectedItemId, setSelectedItemId] = useState&lt;string | null&gt;(null);
  10. function handleItemHover(itemId: string) {
  11. setSelectedItemId(itemId);
  12. }
  13. function handleItemMouseLeave() {
  14. setSelectedItemId(null);
  15. }
  16. function renderMenuItems(menuItems: any[]) {
  17. return menuItems.map((item: any) =&gt; (
  18. &lt;Nav.Item
  19. as=&#39;li&#39;
  20. key={item.id}
  21. onMouseOver={() =&gt; handleItemHover(item.id)}
  22. onMouseLeave={handleItemMouseLeave}
  23. className={selectedItemId === item.id ? &#39;selected&#39; : &#39;&#39;}
  24. &gt;
  25. &lt;Nav.Link as={Link} href={item.url}&gt;
  26. &lt;span&gt;{item.title}&lt;/span&gt;
  27. &lt;/Nav.Link&gt;
  28. {item.children &amp;&amp; item.children.length &gt; 0 &amp;&amp; (
  29. &lt;Nav as=&#39;ul&#39; className={selectedItemId === item.id ? &#39;selected&#39; : &#39;&#39;}&gt;
  30. {renderMenuItems(item.children)}
  31. &lt;/Nav&gt;
  32. )}
  33. &lt;/Nav.Item&gt;
  34. ));
  35. }
  36. return (
  37. &lt;Nav as=&#39;ul&#39;&gt;
  38. {renderMenuItems(MENU)}
  39. &lt;/Nav&gt;
  40. );
  41. }
  42. export default GlobalNav;

Adding the className prop to the nested Nav component to add the "selected" class when the parent Nav.Item is selected. And adding the onMouseLeave={handleItemMouseLeave} event handler to the Nav.Item to trigger the reset of selectedItemId

huangapple
  • 本文由 发表于 2023年7月13日 18:22:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76678321.html
  • event-bubbling
  • javascript
  • next.js
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定