Боковая навигация не закрывается в React, как это исправить?

Question

Он открывается правильно, когда я нажимаю на карточку, но тогда я не могу закрыть меню, когда нажимаю на х. Вы можете найти пример на 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";

  }

<div id="mySidenav" className="sidenav">
                    <a
                      className="closebtn"
                      onClick={() => {
                        this.closeNav();
                        return false;
                      }}
                    >
                      &times;
                    </a>
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Clients</a>
                    <a href="#">Contact</a>
                  </div>

 <div className="card" onClick={() => this.openNav()}>
 ...
 </div>

.sidenav {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  display: inline-block;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

Это то, что я использовал https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

Answer 1

Как правило, компоненты реагирования не стремятся получить доступ к DOM с помощью таких методов, как getElementById.

Вместо этого ваши компоненты должны сохранять свое собственное состояние, а затем их пользовательский интерфейс должен отражать это состояние.

Мы можем упростить ваш пример с помощью 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>
    </>
  );
}

Вызов useState(false) возвращает массив из двух вещей:

• простой элемент состояния, isNavOpen, который может быть либо true, либо false. (Мы инициализировали его false)

• функцией setIsNavOpen, которая может обновлять состояние isNavOpen новым значением.

---

Теперь мы можем легко переключать эту переменную состояния с помощью setIsNavOpen(!isNavOpen) всякий раз, когда мы хотим открыть или закрыть навигационную панель.

---

Наконец, мы можем использовать эту переменную состояния в пользовательском интерфейсе.

<div className={ `sidenav ${isNavOpen ? "open" : "closed"}` }>

Если isNavOpen = true, он отображает <div class="sidenav open">

Если isNavOpen = false, он отображает <div class="sidenav closed">

Answer 2

Я думаю, что это метод старой школы. В ответ вы должны написать такой код:

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>

После этого вы можете расположить css коды соответственно. Я не уверен, но вы должны использовать переходы для анимации. В случае, если вы не знаете выражения ? и :, они совпадают с if и else logi c, если оператор перед знаком ? является истинным, затем js выбирает первую часть (после ? знак - : знак), в противном случае js выбирает вторую часть (после : часть). И, наконец, файл css должен выглядеть следующим образом:

.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;
}

Надеюсь, это поможет:)