Materialize下拉列表在导航栏中不起作用（反应）

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 。

UPDATE因此，似乎只要打开下拉列表，它就能很好地工作，其余部分由库本身处理。因此，以下代码可以完成这项工作：

<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()方法进行类似的函数调用。