当光标悬停时，如何使子菜单显示在每个菜单上

Question

我正在使用react.js实现下拉菜单。我正在查看教程并应用它，但我添加了另一个带有子菜单的菜单，它无法按我的意愿工作。当我把光标放在每个菜单上时，我希望子菜单出现。但是，当我将鼠标悬停在某个菜单上时，会显示所有菜单的子菜单。我觉得道具有问题。但我不知道该怎么修。如果你能帮我，我将不胜感激。

class Gnb extends React.Component {
constructor(props) {
super(props);
this.state = {
showAboutMenu: false
};
}
handleHover = (event) => {
this.setState({ showAboutMenu: true });
};
handleLeave = (event) => {
this.setState({ showAboutMenu: false });
};
render() {
return (
<div id="menu-container">
<nav className="nav">
<ul className="nav__menu">
<li>...</li>
<li className="nav__menu-item" onMouseLeave={this.handleLeave}>
<Link onMouseEnter={this.handleHover} className="a">
요일별
</Link>
<div className="submenu-container">
{ this.state.showAboutMenu && <Submenu_day /> }
</div>
</li>
<li className="nav__menu-item" onMouseLeave={this.handleLeave}>
<Link onMouseEnter={this.handleHover} className="a">
장르별
</Link>
<div className="submenu-container">
{ this.state.showAboutMenu && <Submenu_genre /> }
</div>
</li>
<li>...</li>
</ul>
</nav></div>

这是<Submenu_genre />

const Submenu_genre =(props) =>(
<ul className="nav__submenu">
{genres.map((genre, index)=>(
<li key={index} className="nav__submenu-item">
<Link to="/" className="a">{genre.name}</Link>
</li>
)
)}
</ul>
)

这是关于问题的屏幕截图

屏幕截图

我只想出现红圈。。。

Answer 1

您只需要为以下代码编写新的handleHover和handleLeave

<div className="submenu-container">
{ this.state.showAboutMenu && <Submenu_genre /> }
</div>

您的节目AboutMenu=true是打开子菜单的原因。

Answer 2

它们都在下降，因为它们都引用了相同的状态属性，所以：

{ this.state.showAboutMenu && <Submenu_genre /> }

和

{ this.state.showAboutMenu && <Submenu_day /> }

当this.state.showAboutMenu是true，而不管它们是否单独悬停。