物化下拉菜单在导航栏中不起作用（React）

Question

我正在尝试在导航栏中使用下拉菜单，尽管我正在使用 react 并且某些事情需要以不同的方式完成。我仍然不知道出了什么问题。这是我正在使用的代码，有人知道我做错了什么吗？

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

Answer 1

您正在实例化一个下拉对象，但没有在其上调用任何方法。

这些可以在他们的文档中找到https://materializecss.com/dropdown.html#methods。

你可以做的就是在你的 anchor 标记上调用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> 标记，然后相应地引用元素或使用不同的 Synthetic Events，具体取决于您的要求。

更新 因此，只需打开下拉菜单，它似乎就可以很好地工作，其余的则由库本身处理。所以下面的代码应该可以完成这项工作：

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