Javascript 侧面导航未关闭，如何修复？

当我点击卡片时，它会正确打开，但当我点击x时，我似乎无法关闭菜单。您可以在w3schools上找到一个示例，大部分代码都来自于此。我在代码的底部添加了一个链接

 constructor(props) {
        super(props);
        this.state = {

        };
        this.openNav = this.openNav.bind(this)
        this.closeNav = this.closeNav.bind(this)
      }
  openNav() {


    document.getElementById("mySidenav").style.width = "100%";
  }

  closeNav() {
    document.getElementById("mySidenav").style.width = "0";

  }

---

这就是我所使用的

我认为这是一种老派方法。在react中，您应该这样编写代码：

constructor(props) {
        super(props);
        this.state = {
           isSideBarOpen: false
        };
        this.openNav = this.openNav.bind(this)
        this.closeNav = this.closeNav.bind(this)
      }
  openNav() {
        this.setState({isSideBarOpen: true});
  }

  closeNav() {
        this.setState({isSideBarOpen: false});
  }

html部分应如下所示：

<div id="mySidenav" className={this.state.isSideBarOpen?"sideBarShow":"sideBarHide"}>
   <a className="closebtn" onClick={() => {this.closeNav();}}>
      &times;
   </a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Clients</a>
   <a href="#">Contact</a>
</div>
<div className={this.state.isSideBarOpen?"sideBarOpenButtonHide":"sideBarOpenButtonShow" onClick={() => this.openNav()}>
   ...
</div>

.sideBarShow {
  position: relative;
  height: 100%;
  width: 100px;
  transition: 0.4s ease-in;
}

.sideBarHide {
  width: 0px;
  position: relative;
  transition: 0.4s ease-out;
}
.sideBarOpenButtonShow {
  position: relative;
  opacity: 1;
  transition: 0.4s ease-in;
}

.sideBarOpenButtonHide {
  opacity: 0;
  position: relative;
  transition: 0.4s ease-out;
}

---

我希望它能有所帮助：）

一般来说，react组件不会倾向于使用

getElementById

之类的方法访问DOM

相反，您的组件应该保持它们自己的状态，然后它们的UI应该反映该状态

我们可以使用

useState

简化您的示例

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isNavOpen, setIsNavOpen] = useState(false);
  return (
    <>
      <div className={`sidenav ${isNavOpen ? "open" : ""}`}>
        <button className="closebtn" onClick={() => setIsNavOpen(!isNavOpen)}>
          &times;
        </button>
        <a href="/about">About</a>
        <a href="/services">Services</a>
        <a href="/client">Clients</a>
        <a href="/contact">Contact</a>
      </div>
      <button onClick={() => setIsNavOpen(!isNavOpen)}>Toggle nav</button>
    </>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[isNavOpen，setIsNavOpen]=useState（false）；
返回(
setIsNavOpen（！isNavOpen）}>
&时代；
setIsNavOpen（！isNavOpen）}>切换导航
);
}

调用

useState（false）

返回一个包含两个内容的数组：

• 一个简单的状态，

  isNavOpen

  ，可以是

  true

  或

  false

  。（我们已将其初始化为

  false

  ）

• 一个可以用新值更新

  isNavOpen

  状态的函数

  setIsNavOpen

---

现在，无论何时我们想要打开或关闭nav，都可以使用

setIsNavOpen（！isNavOpen）

轻松切换此状态变量

---

最后，我们可以在UI中使用这个状态变量

如果

isNavOpen

=true，则呈现

---

如果

isNavOpen

=false，则会呈现

您可以发布更多代码或指向沙盒的链接吗？很难从你发布的内容中看出哪里出了问题。在这里它似乎工作得很好，我试过这样做，但当我点击x时它仍然不会关闭，状态似乎也没有改变，因为类保持不变。我在closeNav中放置了一个控制台日志，它可以工作，但该类在div上没有更改。嗯，有趣的是，它应该可以工作，但它没有，但是我找到了答案，因为感谢这篇文章上的评论。当我单击x关闭按钮时，调用设置状态的函数无效。但是调用this.setState（{issidebarpen:！this.state.issidebarpen}）；直接工作。很高兴听到：）

<div id="mySidenav" className={this.state.isSideBarOpen?"sideBarShow":"sideBarHide"}>
   <a className="closebtn" onClick={() => {this.closeNav();}}>
      &times;
   </a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Clients</a>
   <a href="#">Contact</a>
</div>
<div className={this.state.isSideBarOpen?"sideBarOpenButtonHide":"sideBarOpenButtonShow" onClick={() => this.openNav()}>
   ...
</div>

.sideBarShow {
  position: relative;
  height: 100%;
  width: 100px;
  transition: 0.4s ease-in;
}

.sideBarHide {
  width: 0px;
  position: relative;
  transition: 0.4s ease-out;
}
.sideBarOpenButtonShow {
  position: relative;
  opacity: 1;
  transition: 0.4s ease-in;
}

.sideBarOpenButtonHide {
  opacity: 0;
  position: relative;
  transition: 0.4s ease-out;
}

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isNavOpen, setIsNavOpen] = useState(false);
  return (
    <>
      <div className={`sidenav ${isNavOpen ? "open" : ""}`}>
        <button className="closebtn" onClick={() => setIsNavOpen(!isNavOpen)}>
          &times;
        </button>
        <a href="/about">About</a>
        <a href="/services">Services</a>
        <a href="/client">Clients</a>
        <a href="/contact">Contact</a>
      </div>
      <button onClick={() => setIsNavOpen(!isNavOpen)}>Toggle nav</button>
    </>
  );
}