如何使用 Gatsby link 切换类

Question

我正在使用 Gatsby 和 Bulma css。

我无法在 'navMenu' 上切换类并根据设备屏幕尺寸更改导航（视觉）。这些更改将影响 'a' 元素，但不会影响相应的 'navMenu' 元素。 'a' 元素会将 'burger' 图标更改为预期的 'cross' 图标。

这是我的代码

    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <a href="#"
          role="button"
          className={`navbar-burger burger ${isActive? ' is-active' : ' '}`} onClick={()=> {isActive = !isActive}}
          aria-label="menu"
          data-target="navMenu"
          aria-expanded="true"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>


      <div  id="navMenu" className="navbar-menu">
        <div className="navbar-start">
          <a className="navbar-item">Home</a>

          <a className="navbar-item">Documentation</a>

          <div className="navbar-item has-dropdown is-hoverable">
            <a className="navbar-link">More</a>

            <div className="navbar-dropdown">
              <a className="navbar-item">About</a>
              <a className="navbar-item">Jobs</a>
              <a className="navbar-item">Contact</a>
              <hr lass="navbar-divider"></hr>
              <a className="navbar-item">Report an issue</a>
            </div>
          </div>
        </div>

        <div className="navbar-end">
          <div className="navbar-item">
            <div className="buttons">
              <a className="button is-primary">
                <strong>Sign up</strong>
              </a>
              <a className="button is-light">Log in</a>
            </div>
          </div>
        </div>
      </div>
    </nav>

我希望 'navMenu' 在触发 onClick 事件时显示。

谢谢

Answer 1

使用 class 名称轻松管理 class。

import React, {Component} from 'react';
import cs from 'classnames';

class Page extends Component {

    constructor(props) {
        super(props);
        this.state = {
                isActive: false
        }
    }

    render() {

        const { isActive } = this.state

        return (
                <nav className="navbar" role="navigation" aria-label="main navigation">
                    <div className="navbar-brand">
                        <a href="#"
                            role="button"
                            className={cs('navbar-burger burger',{ 'is-active': isActive })} onClick={()=> { this.setState({ isActive: !isActive }) }}
                            aria-label="menu"
                            data-target="navMenu"
                            aria-expanded="true"
                        >
                            <span aria-hidden="true"></span>
                            <span aria-hidden="true"></span>
                            <span aria-hidden="true"></span>
                        </a>
                    </div>


                    <div  id="navMenu" className="navbar-menu">
                        <div className="navbar-start">
                            <a className="navbar-item">Home</a>

                            <a className="navbar-item">Documentation</a>

                            <div className="navbar-item has-dropdown is-hoverable">
                                <a className="navbar-link">More</a>

                                <div className="navbar-dropdown">
                                    <a className="navbar-item">About</a>
                                    <a className="navbar-item">Jobs</a>
                                    <a className="navbar-item">Contact</a>
                                    <hr lass="navbar-divider"></hr>
                                    <a className="navbar-item">Report an issue</a>
                                </div>
                            </div>
                        </div>

                        <div className="navbar-end">
                            <div className="navbar-item">
                                <div className="buttons">
                                    <a className="button is-primary">
                                        <strong>Sign up</strong>
                                    </a>
                                    <a className="button is-light">Log in</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            )

    }

}

Answer 2

这应该有效：

import React, { Component } from "react";
import "./style.scss";


class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
  }
  handleClick = () => {
    this.setState({ active: !this.state.active });
   };
render() {

 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"
          style={{ width: "112", height: "28" }}
          alt=""
        />
      </a>

      <span
        role="button"
        className={
          "navbar-burger burger " + (this.state.active ? "is-active" : "")
        }
        aria-label="menu"
        aria-expanded="false"
        data-target="navbarBasicExample"
        onClick={this.handleClick}
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </span>
    </div>
    <div
      id="navbarBasicExample"
      className={"navbar-menu " + (this.state.active ? "is-active" : "")}
    >
      <div className="navbar-start">
        <a className="navbar-item">Home</a>

        <a className="navbar-item">Documentation</a>

        <div className="navbar-item has-dropdown is-hoverable">
          <a className="navbar-link">More</a>

          <div className="navbar-dropdown">
            <a className="navbar-item">About</a>
            <a className="navbar-item">Jobs</a>
            <a className="navbar-item">Contact</a>
            <hr className="navbar-divider" />
            <a className="navbar-item">Report an issue</a>
          </div>
        </div>
      </div>

      <div className="navbar-end">
        <div className="navbar-item">
          <div className="buttons">
            <a className="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a className="button is-light">Log in</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
    );
  }
}

export default Navbar;

codesandbox.io 上的示例：https://codesandbox.io/s/bulma-reactjs-toggle-menu-hxux4

如何使用 Gatsby link 切换类

How to toggle classes with with Gatsby link

reactjs

gatsby

bulma

如何使用 Gatsby link 切换 类

How to toggle classes with with Gatsby link

reactjs

gatsby

bulma

如何使用 Gatsby link 切换类