React Bulma 移动导航栏未按预期工作

Posted 2023-02-22

【中文标题】React Bulma 移动导航栏未按预期工作

【英文标题】：React Bulma mobile nav bar is not working as expected

【发布时间】：2021-09-28 02:45:48

【问题描述】：

当我单击按钮切换移动导航栏时，它不起作用。我正在使用带有反应的 Bulma css 框架。这是 React 导航栏组件：

onst Header = (props) => 
  const dispatch = useDispatch()
  const  loginUser, isAuthenticated, history, errors  = props;

  const dropdownRef = useRef(null);
  const [isActive, setIsActive] = useDetectOutsideClick(dropdownRef, false);
  const [isMobileActive, setisMobileActive] = useState(false);
  const onClick = () => setIsActive(!isActive);

  const onLogout = () => 
    dispatch(logout())
  

  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <a className="navbar-item" href="https://bulma.io">
          <img
            src="https://bulma.io/images/bulma-logo.png"
            
            
          />
        </a>

        <a
            onClick=() => 
              setisMobileActive(!isMobileActive)
            
            role="button"
            className=`navbar-burger burger $isActive ? "is-active" : ""`
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
      </div>

      <div id="navbarBasicExample" className="navbar-menu">
        <div className="navbar-end">
          <a className="navbar-item">Dashboard</a>

          <div
            onClick=onClick
            ref=dropdownRef
            className=`navbar-item has-dropdown $
              isActive ? "is-active" : ""
            `
          >
            <a className="navbar-link">Account</a>

            <div className="navbar-dropdown is-right">
              <a className="navbar-item">Account settings</a>
              <a className="navbar-item">Set Job filters</a>
              <a className="navbar-item">Report an issue</a>

              <a className="navbar-item" onClick=onLogout>Log out</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
;

最底部的下拉菜单是桌面导航栏。移动切换菜单缺少什么。我该如何解决？我点击切换按钮的人没有任何反应。

【参考方案1】：

我不熟悉 React，但在 bulma 方面，您需要在 navbar-burger 和目标 navbar-menu 上切换类 is-active。Bulma navbar documentation 中有实现示例，我个人使用的是 jQuery 实现，效果很好：

 $(document).ready(function() 

  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() 

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  );
);

但如果您愿意，文档中还有一个 Vanilla javascript 实现。