如何使用 Gatsby 链接切换课程

Question

我正在使用 Gatsby 和 Bulma css。

我无法切换“navMenu”上的类并根据设备屏幕尺寸进行导航（视觉）更改。这些更改将影响“a”元素，但不会影响相应的“navMenu”元素。 “a”元素会将“汉堡”图标更改为预期的“十字”图标。

这是我的代码

    <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>

我希望在引发 onClick 事件时显示“navMenu”。

谢谢

Answer 1

这应该有效：

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

Answer 2

使用类名来轻松管理类。

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>
            )

    }

}