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

【问题标题】：React Bulma mobile nav bar is not working as expectedReact Bulma 移动导航栏未按预期工作
【发布时间】：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"
            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>
  );
};

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

【问题讨论】：

标签： css reactjs react-hooks bulma

【解决方案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 实现。

【讨论】：