光标悬停时如何使子菜单出现在每个菜单上？答案

【问题标题】：How do I make the submenu appear on each menu when cursor hover?光标悬停时如何使子菜单出现在每个菜单上？
【发布时间】：2020-02-27 19:38:45
【问题描述】：

我正在使用 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>
)

这是关于问题的截图

screenshot

我只希望出现红色圆圈...

【问题讨论】：

标签： javascript reactjs navigation submenu

【解决方案1】：

你只需要为下面的代码编写新的handleHover和handleLeave

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

你的 showAboutMenu = true 是打开子菜单的原因。

【讨论】：

【解决方案2】：

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

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

还有

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

两者都将在何时可见 this.state.showAboutMenu 是true，无论它们是否单独悬停。

【讨论】：