Javascript 无法使用React实现侧导航栏

我想使用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;
           
           
           

---

首先，看起来您使用的是基于类的组件，并且没有正确绑定

handleClick

函数。解决方法是将其绑定到

构造函数中，或者使用如下箭头函数：

handleClick = () => { ... }

这同样适用于其他两个函数。有关Arrow函数和在基于类的组件中绑定函数的更多信息，请参阅：

其次，我怀疑在您的
中调用了
handleClick
。而不是

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

this.handleClick}…/>

试一试

或this.handleClick（）}…/>

让我知道这是否有帮助
 非常感谢你的帮助。我做了你建议的改变。它工作得很好，除了我需要点击汉堡两下才能打开它。是因为状态更改过程需要时间，还是我的pogram中有错误？不，它应该只需单击一次。我建议你在这里简化一点，只需要
navbarState
这是一个布尔值（真/假），然后在
handleClick
中，你只需要
this.setState（{navbarState:！this.state.navbarState}）
并像这样控制你的navbar样式：
style={{{width:navbarState？'250px'：'0px}
。
<span onClick={() => this.handleClick} ... />

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