Проблема с отображением подменю при наведении - PullRequest
Новая
       42

Проблема с отображением подменю при наведении

0 голосов
/ 06 января 2020

Я делаю reactjs приложение с реактивной полосой, в которой я сделал выпадающий список, состоящий из подменю внутри него.

Я пытаюсь добиться результата, при котором отображение подменю будет зависать над выпадающим меню и если есть n номеров выпадающего списка, то необходимо отобразить подменю, связанные с элементом наведения.

Код проб: 

<Dropdown
  className="d-inline-block"
  onMouseOver={this.onMouseEnter}
  onMouseLeave={this.onMouseLeave}
  isOpen={this.state.dropdownOpen}
  toggle={this.toggle}
>
  <DropdownToggle caret>Dropdown1</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 1</DropdownItem>
    <DropdownItem>Submenu 1.1</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <DropdownToggle caret>Dropdown2</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 2</DropdownItem>
    <DropdownItem>Submenu 2.1</DropdownItem>
    <DropdownItem>Submenu 2.2</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <br />
  <br />
  <DropdownToggle caret>Dropdown3</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 3</DropdownItem>
    <DropdownItem>Submenu 3.1</DropdownItem>
    <DropdownItem>Submenu 3.2</DropdownItem>
    <DropdownItem>Submenu 3.3</DropdownItem>
  </DropdownMenu>
</Dropdown>

Нажмите здесь для рабочая демонстрация

Ожидаемый результат: http://supply.com/

В приведенной выше ссылке вы могли видеть горизонтальное меню, которое при наведении их подменю и я нуждаемся в том же поведении.

1 Ответ

0 голосов
/ 06 января 2020
  1. Вам необходимо разделить эти меню и поместить в один <Dropdown> компонент.
  2. И вам необходимо установить обработчик событий для каждого из них.
  3. Вы можете использовать Array.prototype.map для упрощения настройки обработчиков. 
import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen: -1
    };
    this.toggle = this.toggle.bind(this);

    this.menus = [
      {
        title: "Bathroom",
        submenus: [{ title: "Toilets" }, { title: "Toilet seats" }]
      },
      {
        title: "Kitchen",
        submenus: [{ title: "Farmhouse Sinks" }, { title: "Cast Iron Sinks" }]
      }
    ];
  }

  onMouseEnter(current) {
    this.setState({ dropdownOpen: current });
  }

  onMouseLeave() {
    this.setState({ dropdownOpen: -1 });
  }

  toggle() {}

  render() {
    return (
      <div>
        {this.menus.map((menu, i) => (
          <Dropdown
            className="d-inline-block"
            onMouseOver={e => this.onMouseEnter(i)}
            onMouseLeave={this.onMouseLeave}
            isOpen={this.state.dropdownOpen === i}
            toggle={this.toggle}
          >
            <DropdownToggle caret>{menu.title}</DropdownToggle>
            <DropdownMenu>
              {menu.submenus.map((submenu, i) => (
                <DropdownItem header>{submenu.title}</DropdownItem>
              ))}
            </DropdownMenu>
          </Dropdown>
        ))}
      </div>
    );
  }
}

stackblitz: https://stackblitz.com/edit/reactstrap-v6-qsffjj

...