React Bulma移动导航栏无法正常工作

Question

当我点击切换移动导航栏的按钮时，它无法正常工作。我正在使用React和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"
            width="112"
            height="28"
          />
        </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>
  );
};

最底部的带下拉菜单的部分是桌面导航栏。移动设备上缺少切换菜单，该怎么办？当我点击切换按钮时没有反应。

- NewTech Lover

Answer 1

我不熟悉React，但在Bulma方面，您需要在navbar-burger和目标navbar-menu上切换is-active类。Bulma导航栏文档中有实现示例，个人使用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");

  });
});

但是如果你想要，文档中也有一个原生的JavaScript实现。

- Reza Rahemtola