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

它们都下降了，因为它们都引用了相同的state属性，因此：

 { 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 是打开该子菜单的原因。

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

2 个答案: