React 嵌套菜单上的悬停状态-解网

问：

在下面的代码中，我有一个嵌套菜单。悬停时，我想将类名添加到 Nav.Item 中，并且仅在将鼠标悬停在另一个 .我可以用.不幸的是，它不会将类添加到任何子级别。selectedNav.ItemonMouseOverselectedNav.Item

因此，标准是：对于将鼠标悬停在任何 Nav.Item 上，应添加选定的类

如果鼠标离开项目，则不删除类selected
将类保留在“出现子菜单时”上selectedNav.Item
仅删除类，如果将鼠标悬停在另一个类上但在同一级别上selectedNav.Item

"use client"; 
 
import Nav from 'react-bootstrap/Nav'; 
import Link from 'next/link'; 
 
import { getMenu } from '@/lib/APIs/menu'; 
import { use, useEffect, useRef, useState } from 'react'; 
import { usePathname } from 'next/navigation'; 
import { Button, NavDropdown } from 'react-bootstrap'; 
 
const dataPromise = getMenu(); 
 
const GlobalNav = () => { 
    const MENU = use(dataPromise); 
    const [selectedItemId, setSelectedItemId] = useState<string | null>(null); 
 
    function handleItemHover(itemId: string) { 
        setSelectedItemId(itemId); 
    } 
 
    function renderMenuItems(menuItems: any[]) { 
        return menuItems.map((item: any) => ( 
            <Nav.Item 
                as='li' 
                key={item.id}    
                onMouseOver={() => handleItemHover(item.id)} 
                className={selectedItemId === item.id ? 'selected' : ''} 
            > 
                <Nav.Link 
                    as={Link} 
                    href={item.url} 
                > 
                    <span> 
                        {item.title} 
                    </span> 
                </Nav.Link> 
                {item.children && item.children.length > 0 && ( 
                    <Nav as='ul'> 
                        {renderMenuItems(item.children)} 
                    </Nav> 
                )} 
            </Nav.Item> 
        )); 
    } 
 
    return ( 
        <Nav as='ul'> 
            {renderMenuItems(MENU)} 
        </Nav> 
    ); 
} 
 
export default GlobalNav;

我希望有人能帮忙。

JavaScript ReactJS TypeScript Next.js 事件冒泡

function hasSelectedChild(menuItem) {
   return menuItem.children && menuItem.children.length > 0 && menuItem.children.find(item => item.id === selectedItemId || hasSelectedChild(item)) 
}

function renderMenuItems(menuItems: any[]) { 
        return menuItems.map((item: any) => ( 
            <Nav.Item 
                as='li' 
                key={item.id}    
                onMouseOver={(e) => {
                  e.stopPropagation();
                  handleItemHover(item.id)
                }} 
                className={(hasSelectedChild(item) || selectedItemId === item.id) ? 'selected' : ''}
            > 
                <Nav.Link 
                    as={Link} 
                    href={item.url} 
                > 
                    <span> 
                        {item.title} 
                    </span> 
                </Nav.Link> 
                {item.children && item.children.length > 0 && ( 
                    <Nav as='ul'> 
                        {renderMenuItems(item.children)} 
                    </Nav> 
                )} 
            </Nav.Item> 
        )); 
    }

import Nav from 'react-bootstrap/Nav';
import Link from 'next/link';
import { getMenu } from '@/lib/APIs/menu';
import { usePathname } from 'next/navigation';
import { Button, NavDropdown } from 'react-bootstrap';

const dataPromise = getMenu();

const GlobalNav = () => {
  const MENU = use(dataPromise);
  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);

  function handleItemHover(itemId: string) {
    setSelectedItemId(itemId);
  }

  function handleItemMouseLeave() {
    setSelectedItemId(null);
  }

  function renderMenuItems(menuItems: any[]) {
    return menuItems.map((item: any) => (
      <Nav.Item
        as='li'
        key={item.id}
        onMouseOver={() => handleItemHover(item.id)}
        onMouseLeave={handleItemMouseLeave}
        className={selectedItemId === item.id ? 'selected' : ''}
      >
        <Nav.Link as={Link} href={item.url}>
          <span>{item.title}</span>
        </Nav.Link>
        {item.children && item.children.length > 0 && (
          <Nav as='ul' className={selectedItemId === item.id ? 'selected' : ''}>
            {renderMenuItems(item.children)}
          </Nav>
        )}
      </Nav.Item>
    ));
  }

  return (
    <Nav as='ul'>
      {renderMenuItems(MENU)}
    </Nav>
  );
}

export default GlobalNav;

将 className 属性添加到嵌套的 Nav 组件中，以在选择父 Nav.Item 时添加“selected”类。并将 onMouseLeave={handleItemMouseLeave} 事件处理程序添加到 Nav.Item 以触发 selectedItemId 的重置

上一个：子元素的 click 事件被父元素的 event.stopPropagation 阻止

下一个：Celery ChordError 从深度嵌套的工作流传播并在错误处理程序中捕获它们

React 嵌套菜单上的悬停状态

Hover states on React nested menu

评论

评论