下拉菜单-点击项目后消失

Question

我正在尝试创建"下拉菜单"；在React中。我在onMouseEnter和onMouseLeave事件(在下拉框usdiv/NaviMain中(中的函数中使用了useState；下拉菜单"；。最后一件事是制作"；下拉菜单"；单击DropdownMenuItem时消失。有人能告诉我如何做到这一点吗？

App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NaviMain from "./components/NaviMain";
import Info from "./pages/Info";
import VerticalAlign from "./pages/VerticalAlign";
import Flexbox from "./pages/Flexbox";
function App() {
return (
<Router>
<div className="App">
<NaviMain />
<Routes>
<Route path="/" element={<Info />} />
<Route path="/verticalalign" element={<VerticalAlign />} />
<Route path="/flexbox" element={<Flexbox/>} />
</Routes>      
</div>
</Router>
);
}
export default App;

NaviMain.js

import { useState } from "react"
import DropdownMenuItem from "./sub-components/DropdownMenuItem"
const NaviMain = () => {
const [disp, setDisp] = useState("hide-menu");
const hoverOn = () => {
setDisp("show-menu")
}
const hoverOff = () => {
setDisp("hide-menu")
}
return (
<nav>
<ul">
<li onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
<a className="hover-pointer">school</a>
<div className={`dropdown-holder-us ${disp}`}>
<DropdownMenuItem title="v align" link={"/verticalAlign"}/>
<DropdownMenuItem title="flexbox" link={"/flexbox"} />
</div>
</li>           
</ul>    
</nav>
)
}
export default NaviMain

DropdownMenuItem.js

import { Link } from "react-router-dom";

const DropdownMenuItem = ({title , link}) => {    
return (
<>
<Link to={link}">
{title}
</Link>   
</>   
)
}
export default DropdownMenuItem

Answer 1

我认为最简单的解决方案是使disp成为一个布尔值，它决定是否显示下拉菜单。为了更好的易读性，我将下拉菜单缩短为<DropdownMenu>组件(您可能想在代码中这样做，可能更容易维护(。

const NaviMain = () => {
const [display, setDisplay] = useState(false);
const hoverOn = () => {
setDisplay(true)
}
const hoverOff = () => {
setDisplay(false)
}
return (
<nav>
<ul">
<li onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
<a className="hover-pointer">school</a>
{
display ? <DropdownMenu / >
}
</li>           
</ul>    
</nav>
)
}

如果很难使下拉菜单像这样出现和消失，另一种使其工作的方法是将disp附加到css类，该类决定DropdownMenu是display: block还是display: none。

Answer 2

在重建NaviMain.js(就像@cSharp在他的回答中建议的那样(后，我创建了单独的组件DropdownMenu和MenuItemContentSchool。因此；CCD_ 12"；由鼠标evenets管理的效果在li中，CCD_13是"；下拉菜单"；。而"；下拉菜单"；由容器div内的点击事件管理。非常简单，灵感来自Brian Design视频。

NaviMain.js

import { useState } from "react"
import DropdownMenu from "./DropdownMenu";
const NaviMain = () => {
const [disp, setDisp] = useState(false);
const hoverOn = () => setDisp(true)
const hoverOff = () => setDisp(false)

return (
<nav>
<ul>
<li className= onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
<a>school</a>
{ disp && <DropdownMenu /> }
</li>          
</ul>
</nav>
)
}
export default NaviMain

下拉菜单

import { useState } from "react"
import { MenuItemContentSchool } from "./sub-components/MenuItemContentSchool"
import { Link } from "react-router-dom";
const DropdownMenu = ( {disp} ) => {
const [click, setClick] = useState("")
const handleClick = () => {
setClick("hide-menu")
}

return (
<div className={`dropdown-holder-us ${disp} ${click}`}>
{MenuItemContentSchool.map((item, index) => {
return (
<Link to={item.link} className="d-content-us" onClick={handleClick}>
{item.title}
</Link>
)
} )}
</div>
)
}
export default DropdownMenu

MenuItemContentSchool

export const MenuItemContentSchool = [
{
title:"v align",
link:"/verticalAlign"
},
{
title:"flexbox",
link:"/flexbox"
}
]

Answer 3

我遇到了类似的问题，然后我找到了RCA。

我的页面结构当错误被复制时

function Parent(){
const [state,setState] = useState([]); // store multi-select state
function MultiSelect(){  // placement of this function is problem
}
}

When state of multi-select changes then parent component is redrawn so memu item disappear.

我的页面结构粘贴结构

function Parent(){
const [state,setState] = useState([]); // store multi-select state

}
function MultiSelect(){  // placement of this function outside parent
}

My在父级中放置多选组件声明组件在更新父级的状态时产生问题多选组件被重新绘制