Javascript 反应-导航下拉菜单，此时仅显示一个下拉菜单

我正在做我的第一个react项目，我有点卡住了

我试图创建一个导航菜单，当你点击，例如，“男人”，一个下拉菜单出现

我遇到的问题是，这些下拉列表中只有一个同时显示，我总共有6个下拉列表

我一直试图从元素中删除该类，然后重新添加它，但问题是它会将该类切换回原来的状态

代码如下：

const BottomNavigation = (props) => {
  const [menShowing, setMenShowing] = useState(false);
  const [womenShowing, setWomenShowing] = useState(false);
  const [accessoriesShowing, setAccessoriesShowing] = useState(false);
  const [shoesShowing, setShoesShowing] = useState(false);
  const [faceBodyShowing, setFaceBodyShowing] = useState(false);
  const [newInShowing, setNewInShowing] = useState(false);

  const menHandler = () => setMenShowing((prevCheck) => !prevCheck);
  const womenHandler = () => setWomenShowing((prevCheck) => !prevCheck);
  const accessoriesHandler = () =>
    setAccessoriesShowing((prevCheck) => !prevCheck);
  const shoesHandler = () => setShoesShowing((prevCheck) => !prevCheck);
  const faceBodyHandler = () => setFaceBodyShowing((prevCheck) => !prevCheck);
  const newInHandler = () => setNewInShowing((prevCheck) => !prevCheck);

  return (
    <nav>
      <div className={classes.bottom_navigation}>
        <div className={classes.nav_items_container}>
          <ul className={classes.nav_link}>
            <li className={`${classes.nav_item}`}>
              <p onClick={menHandler}>men</p>
              <div
                key="men"
                className={`${classes.nav_dropdown} ${classes.dropdown__men} ${
                  menShowing ? classes.dropdown_show : null
                }`}
              >
                <Men />
              </div>
            </li>
            <li className={classes.nav_item}>
              <p onClick={womenHandler}>women</p>
              <div
                key="women"
                className={`${classes.nav_dropdown} ${
                  classes.dropdown__women
                } ${womenShowing ? classes.dropdown_show : null} `}
              >
                <Women />
              </div>
            </li>
            <li className={classes.nav_item}>
              <p onClick={accessoriesHandler}>accessories</p>
              <div
                key="accessories"
                className={`${classes.nav_dropdown} ${
                  classes.dropdown__accessories
                } ${accessoriesShowing ? classes.dropdown_show : null} `}
              >
                <Accessories />
              </div>
            </li>
            <li className={classes.nav_item}>
              <p onClick={shoesHandler}>shoes</p>
              <div
                key="shoes"
                className={`${classes.nav_dropdown} ${
                  classes.dropdown__shoes
                } ${shoesShowing ? classes.dropdown_show : null} `}
              >
                <Shoes />
              </div>
            </li>
            <li className={classes.nav_item}>
              <p onClick={faceBodyHandler}>face + body</p>
              <div
                key="facebody"
                className={`${classes.nav_dropdown} ${
                  classes.dropdown__facebody
                } ${faceBodyShowing ? classes.dropdown_show : null} `}
              >
                <FaceBody />
              </div>
            </li>
            <li className={classes.nav_item}>
              <p onClick={newInHandler}>new in</p>
              <div
                key="newin"
                className={`${classes.nav_dropdown} ${
                  classes.dropdown__newin
                } ${newInShowing ? classes.dropdown_show : null} `}
              >
                <NewIn />
              </div>
            </li>
          </ul>
        </div>
        <div className={classes.options_container}>
          <div className={classes.icon_container}>
            <span className={classes.cart_sum}>$0.00</span>
            <Cart className={classes.icon} />
          </div>
          <div className={classes.icon_container}>
            <Heart className={classes.icon} />
          </div>
          <div className={classes.icon_container}>
            <Visibility className={classes.icon} />
          </div>
          <div className={classes.icon_container}>
            <User className={classes.icon} />
          </div>
        </div>
      </div>
    </nav>
  );
};

const-BottomNavigation=（道具）=>{
const[menShowing，setMenShowing]=使用状态（false）；
const[womenShowing，setWomenShowing]=useState（false）；
const[accessoriesShowing，setAccessoriesShowing]=useState（false）；
const[shoesShowing，setShoesShowing]=使用状态（false）；
const[faceBodyShowing，setFaceBodyShowing]=useState（false）；
const[newInShowing，setNewInShowing]=useState（false）；
const menHandler=（）=>setMenShowing（（prevCheck）=>！prevCheck）；
const womenHandler=（）=>setWomenShowing（（prevCheck）=>！prevCheck）；
常量附件Shandler=（）=>
setAccessoriesShowing（（prevCheck）=>！prevCheck）；
const shoesHandler=（）=>鞋套展示（（prevCheck）=>！prevCheck）；
const faceBodyHandler=（）=>setFaceBodyShowing（（prevCheck）=>！prevCheck）；
const newInHandler=（）=>setNewInShowing（（prevCheck）=>！prevCheck）；
返回(


男人


女性


附件


鞋


face+body


newin


$0.00
);
};

---

如果需要任何其他组件来解决此问题，请告诉我

您可以使用单个

useState

和单个菜单单击处理程序，而不是将每个项目的显示状态保留在不同的useState中，如：

const [showItem, setShowItem] = useState(null);

const menuClickHandler = (param) => {
  if (showItem === param) {
    setShowItem(null);
  } else {
    setShowItem(param);
  }
};

在导航项目中，您可以调用菜单单击处理程序，检查当前状态是否为当前项目的名称，如：

<li className={`${classes.nav_item}`}>
  <p onClick={() => menuClickHandler("men")}>men</p>
  <div
    key="men"
    className={`${classes.nav_dropdown} ${classes.dropdown__men} ${
    showItem === "men" ? classes.dropdown_show : null
    }`}
  >
      <Men />
  </div>
</li>

menuClickHandler（“men”）}>men

---

你可以看看这个用法。

我强烈建议通过制作一个可以重用的新组件来解决这个问题。我会叫我的下拉菜单。这利用了React对state的使用。我们希望每个下拉列表都能控制其自身的打开与否状态。更改类是有效的，但我认为您没有充分利用React的功能

这是我的快速版本的下拉列表，你可以测试出来。我在这里使用的技术主要是

导入“/dropdown.css”； 从“React”导入React、{useCallback、useffect、useRef、useState}； 常量下拉列表=（{onOpen，label，children}）=>{ 常量[isOpen，setIsOpen]=useState（false）； const containerRef=useRef（）； const onMouseDown=useCallback( （e） =>{ if（containerRef.current&！containerRef.current.contains（e.target））{ setIsOpen（假）； } }, [containerRef，setIsOpen] ); useffect（（）=>{ if（等参线）{ onOpen（）； } }，[isOpen，onOpen]）； useffect（（）=>{ addEventListener（“mousedown”，onMouseDown）； return（）=>window.removeEventListener（“mousedown”，onMouseDown）； }，[onMouseDown]）； const toggleIsOpen=（）=>{ setIsOpen（！isOpen）； } 返回( {label} {isOpen&&{children} ); }; 导出默认下拉列表； 在这里，它在一个简单的App.js中运行

import React from "react";
import Dropdown from "./Dropdown.js";

function App() {
  return (
    <div className="App">
      <div className="menu">
        <Dropdown
          label={<div>Men</div>}
          onOpen={() => console.log("Opening men")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
        <Dropdown
          label={<div>Women</div>}
          onOpen={() => console.log("Opening women")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
        <Dropdown
          label={<div>Shoes</div>}
          onOpen={() => console.log("Opening shoes")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
        <Dropdown
          label={<div>Accessories</div>}
          onOpen={() => console.log("Opening accessories")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
      </div>
    </div>
  );
}

export default App;

从“React”导入React；
从“/Dropdown.js”导入下拉列表；
函数App（）{
返回(
console.log（“开场白”）}
>
测试菜单
测试菜单
测试菜单
console.log（“打开女性”）}
>
测试菜单
测试菜单
测试菜单
console.log（“打开鞋子”）}
>
测试菜单
测试菜单
测试菜单
测试菜单
console.log（“打开附件”）}
>
测试菜单
测试菜单
测试菜单
测试菜单
测试菜单
测试菜单
);
}
导出默认应用程序；

---

如果你有问题，请告诉我

类

对象的内容可能很有用。我看不到React状态的用法。我看到很多DOM突变。你试过使用React states吗？@Kunukn我试过在那里使用

useState

，但不知道如何在这个场景中使用它。有没有关于我应该使用哪一种的建议？我自己也在谷歌上搜索过，但只找到了关于一个元素的下拉列表的教程/帖子，而不是多个。@AhmetEmreKılınçI在pastebin上发布了css代码，结尾是：

ENz82MM4

你是说

dropdown\u show

当你说“它将类切换回来”时，类将被读取到以前选择的项中吗？因为我可以

import React from "react";
import Dropdown from "./Dropdown.js";

function App() {
  return (
    <div className="App">
      <div className="menu">
        <Dropdown
          label={<div>Men</div>}
          onOpen={() => console.log("Opening men")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
        <Dropdown
          label={<div>Women</div>}
          onOpen={() => console.log("Opening women")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
        <Dropdown
          label={<div>Shoes</div>}
          onOpen={() => console.log("Opening shoes")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
        <Dropdown
          label={<div>Accessories</div>}
          onOpen={() => console.log("Opening accessories")}
        >
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
          <div>Test Menu</div>
        </Dropdown>
      </div>
    </div>
  );
}

export default App;