无法在反应中切换下拉列表答案

【问题标题】：unable to toggle dropdown list in react无法在反应中切换下拉列表
【发布时间】：2023-02-14 21:53:46
【问题描述】：

我创建了一个简单的反应项目，我试图在其中实现下拉列表。

我正在尝试为配置文件创建一个下拉列表，这样反应->

下拉列表.js

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

function DropdownNavbar() {
  const [toggle, setToggle] = useState(false);

  const menuToggle = () => {
    setToggle(!toggle);
  };

  return (
    <>
      <div className="new-box d-flex" onClick={menuToggle}>
        <div className="profile p-2 flex-fill">
          <img src="images/avatar-img.png" />
        </div>
        <div className="name-text p-2 flex-fill">Alex John</div>
      </div>
      {toggle && (
        <div class="menu">
          <ul>
            <li>
              <a href="#">My profile</a>
            </li>
            <li>
              <a href="#">Inbox</a>
            </li>
            <li>
              <a href="#">Logout</a>
            </li>
          </ul>
        </div>
      )}
    </>
  );
}

export default DropdownNavbar;

样式.css

.new-box{
  display: flex;
}

.name-text{
  margin-top: 15px;
}

.profile {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin: 5px 10px 5px 0px;
}

 .profile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 .menu {
  position: absolute;
  top: 120px;
  right: -10px;
  padding: 10px 20px;
  background: #fff;
  width: 200px;
  box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
}

 .menu.active {
  top: 80px;
  visibility: visible;
  opacity: 1;
}

 .menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
}

 .menu h3 {
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 20px 0;
  font-weight: 500;
  color: #555;
  line-height: 1.5em;
}

 .menu h3 span {
  font-size: 14px;
  color: #cecece;
  font-weight: 300;
}

 .menu ul li {
  list-style: none;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.menu ul li img {
  max-width: 20px;
  margin-right: 10px;
  opacity: 0.5;
  transition: 0.5s;
}

 .menu ul li:hover img {
  opacity: 1;
}

 .menu ul li a {
  display: inline-block;
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: 0.5s;
}

 .menu ul li:hover a {
  color: #ff5d94;
}

我在我的导航栏中添加了这个配置文件。导航栏正在App.js中呈现当我点击div时，没有任何反应。有人可以帮忙吗？

【问题讨论】：

在使用 React 时直接处理 DOM 不是一个好习惯。更好的方法是将布尔变量保持在本地状态，并在单击时切换该布尔变量。现在使用该布尔变量作为条件，为 .menu 指定所需的类。
打字错误？这将调用函数立即地：onClick={menuToggle()} 你打算传递函数本身：onClick={menuToggle}。（顺便说一句，在 React 中直接操作 DOM 几乎总是错误的方法。）
@MohitBhardwaj 我已经更新了代码请再次检查。还是不行

标签： javascript reactjs

【解决方案1】：

处理程序中的错误

它应该是：

onClick={menuToggle}

并且不使用类 - 类名，不直接使用 DOM - 使用 useState 钩子。例子：

const [isOpen, setIsOpen] = useState(false);
  const menuToggle = () => {
    setIsOpen((prev) => !prev);
  };

<div className={isOpen ? "menu active" : "menu"}>
//...

https://codesandbox.io/s/nervous-fast-1uvxs2?file=/src/App.js:470-519

【讨论】：