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

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>
)

这是关于问题

的截图

screenshot

我只想显示红色圆圈...

Answer 1

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

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

和

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

两者都将在以下时间可见 this.state.showAboutMenu 是 true 无论它们是否分别悬停。

Answer 2

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

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

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

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

How do I make the submenu appear on each menu when cursor hover?

javascript

navigation

submenu

reactjs