Выпадающий список не работает в Navbar (React) - PullRequest
Новая
       22

Выпадающий список не работает в Navbar (React)

0 голосов
/ 24 октября 2019

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

import M from 'materialize-css';
const Navbar = ({ lang: { language, loading }, getLang }) => {

  useEffect(() => {
    getLang(0);
    let dropdowns = document.querySelectorAll('.dropdown-trigger');
    let options = {
      inDuration: 300,
      outDuration: 225,
      hover: true,
      belowOrigin: true
    };
    M.Dropdown.init(dropdowns, options);
    // eslint-disable-next-line
  }, []);

  if (!language || loading) {
    return <Preloader />;
  }

  return (
    <div>
      <nav className='blue darken-2'>
        <div className='nav-wrapper'>
          <Link to='/' className='brand-logo' style={{ marginLeft: '1%' }}>
            SwimTechNL
          </Link>
          <ul
            id='nav-mobile'
            className='right hide-on-med-and-down'
            style={{ marginRight: '1%' }}
          >
            <li>
              <Link to='/about'>{language.Navbar.about}</Link>
            </li>
            <li>
              <a className='dropdown-trigger' href='#!' data-target='dropdown1'>
                Dropdown<i class='material-icons right'>arrow_drop_down</i>
              </a>
              <ul id='dropdown1' className='dropdown-content'>
                <li>
                  <a href='#!'>one</a>
                </li>
                <li>
                  <a href='#!'>two</a>
                </li>
                <li className='divider'></li>
                <li>
                  <a href='#!'>three</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
};

1 Ответ

0 голосов
/ 25 октября 2019

Вы создаете объект Dropdown объект , но не вызываете никаких методов для него.

Их можно найти здесь https://materializecss.com/dropdown.html#methods в их документации.

То, что вы, вероятно, можете сделать, это вызвать методы open() и close() для вашего тега привязки <a> для раскрывающегося списка следующим образом: 

<a
   id="FirstDropDown"
   className="dropdown-trigger"
   href="#!"
   data-target="dropdown1"
   onMouseEnter={e => M.Dropdown.getInstance(e.target).open()}
   onMouseLeave={e => M.Dropdown.getInstance(e.target).close()}
   >
   Dropdown<i class="material-icons right">arrow_drop_down</i>
</a>

Хотяэто может закрыть раскрывающийся список, как только вы перейдете к раскрывающемуся списку, для которого вы можете либо переместить эти функции в тег <li> и затем соответствующим образом ссылаться на элемент, либо использовать другие синтетические события в зависимости отваши требования.

ОБНОВЛЕНИЕ Таким образом, кажется, что он работает отлично, просто открывая выпадающий список, а остальное обрабатывается самой библиотекой. Таким образом, следующий код должен выполнить эту работу: 

<a
   id="FirstDropDown"
   className="dropdown-trigger"
   href="#!"
   data-target="dropdown1"
   onMouseEnter={e => {
   const inst = M.Dropdown.getInstance(e.target);
   inst && inst.open();
   }}
   >
   Dropdown <i class="material-icons right">arrow_drop_down</i>
 </a>

Если этого не произойдет, вызов функции, аналогичный методу close().

Вот полный код для него. 

import React, { useEffect } from "react";
import M from "materialize-css";

const Navbar = () => {
  useEffect(() => {
    let dropdowns = document.querySelectorAll(".dropdown-trigger");
    let options = {
      inDuration: 300,
      outDuration: 225,
      hover: true,
      belowOrigin: true
    };
    M.Dropdown.init(dropdowns, options);

    // eslint-disable-next-line
  }, []);

  return (
    <div>
      <nav className="blue darken-2">
        <div className="nav-wrapper">
          <a className="brand-logo" style={{ marginLeft: "1%" }}>
            SwimTechNL
          </a>
          <ul
            id="nav-mobile"
            className="right hide-on-med-and-down"
            style={{ marginRight: "1%" }}
          >
            <li>
              <a>About</a>
            </li>
            <li>
              <a
                id="FirstDropDown"
                className="dropdown-trigger"
                href="#!"
                data-target="dropdown1"
                onMouseEnter={e => {
                  const inst = M.Dropdown.getInstance(e.target);
                  inst && inst.open();
                }}
              >
                Dropdown <i class="material-icons right">arrow_drop_down</i>
              </a>
              <ul
                style={{ marginLeft: "500px", display: "none" }}
                id="dropdown1"
                className="dropdown-content"

              >
                <li style={{ backgroundColor: "yellow" }}>
                  <a href="#!">one</a>
                </li>
                <li style={{ backgroundColor: "red" }}>
                  <a href="#!">two</a>
                </li>
                <li className="divider"></li>
                <li style={{ backgroundColor: "purple" }}>
                  <a href="#!">three</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;
...