我正在使用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>
)
这是关于问题的屏幕截图
我只希望出现红色圆圈...
您只需要为以下代码编写新的handleHover和handleLeave
<div className="submenu-container">
{ this.state.showAboutMenu && <Submenu_genre /> }
</div>
您的showAboutMenu = true是打开子菜单的原因。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句