Как сделать так, чтобы подменю появлялось в каждом меню при наведении курсора? - PullRequest
Новая
       24

Как сделать так, чтобы подменю появлялось в каждом меню при наведении курсора?

0 голосов
/ 01 ноября 2019

Я использую раскрывающееся меню с помощью response.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>
)

и это скриншот о проблеме

снимок экрана

Я хочу, чтобы появился только красный круг ...

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

Вам просто нужно написать новые handleHover и handleLeave для указанных ниже кодов 

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

your showAboutMenu = true является причиной открытия подменю.

0 голосов
/ 01 ноября 2019

Они оба сбрасываются, потому что они оба ссылаются на одно и то же свойство состояния так: 

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

И 

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

Оба будут видны, когда this.state.showAboutMenu равен true независимо от того, включены ли они отдельно.

...