我正在尝试向此汉堡包按钮添加活动状态

Question

我正在尝试将活动状态附加到此汉堡包图标以获取动画，但它不起作用。我整天都在Google上尝试解决这个问题。有人可以帮帮我吗。汉堡包图标需要在活动状态之间切换才能进行动画制作，我意识到通过javascript这样做会破坏应用程序。所以我添加了一些状态，但仍然无法正常工作，请帮助

我可以使用带有ID汉堡的按钮或使用 <Slider/>个组件已导入/

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import { ButtonContainer } from "./Button.jsx";
import { Slider } from "react-burgers";

export default class Navbar extends Component {

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

    click() {
        this.setState({active: true});
    }

  render() {
    // OnScroll Hide
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
      } else {
        document.getElementById("navbar").style.top = "-50px";
      }
      prevScrollpos = currentScrollPos;
    };

    return (
      <nav
        id="navbar"
        className="navbar hoverme fixed-top navbar-expand-lg navbar-dark bg-black border-bottom border-info  border-warning  "
      >
        <Link to="/" className="nav-link text-capitalize text-warning">
          home
        </Link>
        <button
          className="navbar-toggler  "
          type="button"
          data-toggle="collapse"
          data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon "></span>
        </button>
        <button
          id="hamburger"
          onClick={this.click.bind(this)}
          className="hamburger hamburger--collapse  bg-warning "
          type="button"
        >
          <span className="hamburger-box">
            <span className="hamburger-inner"></span>
          </span>
        </button>
        <div
          className="collapse navbar-collapse text-center"
          id="navbarTogglerDemo02"
        >
          <ul className="navbar-nav mr-auto mt-2 mt-lg-0 ">
            <li className="nav-item dropdown ">
              <span
                className="nav-link dropdown-toggle text-light pointer"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                Products
              </span>
              <div
                className="dropdown-menu  bg-black"
                aria-labelledby="navbarDropdown"
              >
                <Link
                  to="/clothing"
                  className="dropdown-item text-center  bg-black"
                >
                  Clothing
                </Link>
                <Link
                  to="/gadgets"
                  className="dropdown-item text-center  bg-black"
                >
                  Gadgets
                </Link>
                <Link
                  to="/smoke"
                  className="dropdown-item text-center  bg-black"
                >
                  Head Shop
                </Link>
              </div>
            </li>
          </ul>
          <li className="nav-item active list-unstyled">
            <Link to="cart" className="ml-auto border-none">
              <ButtonContainer>
                <span className="mr-2">
                  <i className="fas fa-cart-plus"></i>
                  {/* (0) */}
                </span>
              </ButtonContainer>
            </Link>
          </li>
        </div>
      </nav>
    );
  }
}