无法使用 React 实现侧导航栏

Question

我想使用 react 实现一个汉堡侧导航栏，但我无法实现必须在单击汉堡时显示的更改。我仍在学习 React，所以请解释我做错了什么，并随时提出替代方法。这是我的代码。

import React from 'react';
import * as FaIcons from "react-icons/fa";

class Navbar extends React.Component {
    constructor() {
        super();
        this.state = {
            navbarState : 1,
            style : {}
        }
    }

    openNav() {
        this.setState({"width" : "250px"});
    }

    closeNav() {
        this.setState({"width" : "0px"});
    }

    handleClick() {
        this.setState((prevState) => {
            if(prevState.navbarState === 0) {
                return {navbarState : 1, style : {width : '250px'}};
            }
            else {
                return {navbarState : 0, style : {width : '0px'}};
            }
        });
    }

    render() {
        return (
            <div>
                <div id="mySidenav" className="sidenav" style={this.state.style} >
                    {console.log(this.state.navbarState)}
                    <a href="#" className="closebtn" onClick={() => this.handleClick}>&times;</a>
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Clients</a>
                    <a href="#">Contact</a>
                </div>
                <span onClick={() => this.handleClick}>
                    {/* <FaIcons.FaBars /> */}
                    <div className = "hamburger">
                        <div className="line"></div>
                        <div className="line"></div>
                        <div className="line"></div>
                    </div>
                </span>
            </div>
        );
    }
}

export default Navbar;
           
           
           

我的 CSS 如下：

.hamburger{
    position: absolute;
    cursor: pointer;
    margin: 5px;
    right: 5%;
    top: 5%;
}



.line{
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
}


.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: black; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


.sidenav-active {
  height: 100%; /* 100% Full-height */
  width: 250px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: black; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

}


/* The navigation menu links */
.sidenav a, .sidenav-active a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav-active a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenav-active .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
           

Answer 1

首先，您使用的是基于类的组件，并且您没有正确绑定 handleClick 函数。解决方案是将其绑定到您的 constructor 或使用如下箭头函数：

handleClick = () => { ... }

这同样适用于您的其他两个函数。有关箭头函数和在基于类的组件中绑定函数的更多信息，请参阅：https://reactjs.org/docs/faq-functions.html

其次，我怀疑handleClick 在您的<span> 中被调用。而不是

<span onClick={() => this.handleClick} ... />

试试

<span onClick={this.handleClick} ... /> or <span onClick={() => this.handleClick()} ... />

如果这有帮助，请告诉我！