Reactjs 单击时如何在此侧边栏中进行下拉？

我现在被困在如何在侧边栏中创建一个下拉菜单上，所以当我点击它时，我应该显示或隐藏一个子菜单

---

这个想法是添加一个类来隐藏和显示元素

侧边栏.js

import React, { Fragment } from "react";
import "./style.css";

class sidebar extends React.Component {
  state = {
    isOpen: false,
  };

  toggleClass = (e) => {
    e.preventDefault();
    this.setState((prevState) => ({isOpen: !prevState.isOpen}));
  };

  render() {
    return (
      <div class="sidenav ">
        <a href="/">Retour a l'acceuil</a>
        <a href="/" onClick={this.toggleClass}>
          <span
            class="iconify hamburger"
            data-inline="false"
            data-icon="ic:round-menu"
          />
          Liste des élèves
          <span
            class="iconify down"
            data-inline="false"
            data-icon="bx:bxs-down-arrow"
          />
          </a>
        <div className={this.state.isOpen ? 'show': 'hide'} >
        <a href="/">
          <span
            class="iconify"
            data-inline="false"
            data-icon="ic:baseline-keyboard-arrow-right"
          />
          Item1
        </a>
        <a href="/">
          <span
            class="iconify"
            data-inline="false"
            data-icon="ic:baseline-keyboard-arrow-right"
          />
          Item2
        </a>
        <a href="/">
          <span
            class="iconify"
            data-inline="false"
            data-icon="ic:baseline-keyboard-arrow-right"
          />
          Item3
        </a>
        </div>

        <a href="/">Abscences</a>
        <a href="/">Inscription au concours</a>
        <a href="/">Résultat</a>
        <a href="/">Messagerie</a>
      </div>
    );
  }
}
export default sidebar;

...
.hide {
  display: none;
}

.show {
  display: block;
}

---

到目前为止你试过什么？