打開下拉菜單並單擊 React 中的特定類別后，如何使下拉菜單消失

Question

我有一個下拉菜單的問題，在我點擊它並選擇一個特定的類別后，它仍然在屏幕上，我點擊它后顯示在一個框中。 所以一切正常，除了下拉菜單沒有消失，我希望它在我點擊類別后消失。

我試圖創建一個函數 (const handleMenuOne)，我可以在其中刪除下拉菜單並同時在框中顯示類別文本，但它不起作用。 知道如何讓這個下拉菜單消失並同時在框中顯示類別嗎？

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

const Dropdown = () => {
  const [open, setOpen] = useState("");

  const handleOpen = () => {
    setOpen(!open);
  };

  const handleMenuOne = () => {
    setOpen("Dame Klip", false);
  };

  const handleMenuTwo = () => {
    setOpen(false);
  };

  const handleMenuthree = () => {
    setOpen(false);
  };

  const handleMenufour = () => {
    setOpen(false);
  };

  const handleMenufive = () => {
    setOpen(false);
  };

  return (
    <section className="dropdown_container">
      <div className="Search">
        Vælg Service
        <button className="Search_Input" onClick={handleOpen}>
          {open}
        </button>
        {open ? (
          <ul className="menu">
            <li className="menu-item">
              <button onClick={handleMenuOne}>Dame Klip</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenuTwo}>Herre Klip</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenuthree}>Farvning</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenufour}>Permanent</button>
            </li>
            <li className="menu-item">
              <button onClick={handleMenufive}>Hår opsætning</button>
            </li>
          </ul>
        ) : null}
        {open ? <div>Is Open</div> : <div></div>}
      </div>
    </section>
  );
};

export default Dropdown;

Answer 1

這是解決方案。 您可以使用 2 個state變量。 而且我已經從您的代碼中刪除了一堆功能。

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

const App = () => {
  const [open, setOpen] = useState(false);
  const [selectedMenu, setSelectedMenu] = useState("");

  const handleOpen = () => {
    setOpen(!open);
  };

  const handleMenu = (e) => {
    e.stopPropagation();
    setSelectedMenu(e.target.textContent);
    setOpen(false);
  };

  return (
    <section className="dropdown_container">
      <div className="Search">
        Vælg Service
        <button className="Search_Input" onClick={handleOpen}>
          {selectedMenu}
        </button>
        {open ? (
          <ul className="menu" onClick={handleMenu}>
            <li className="menu-item">Dame Klip</li>
            <li className="menu-item">Herre Klip</li>
            <li className="menu-item">Farvning</li>
            <li className="menu-item">Permanent</li>
            <li className="menu-item">Hår opsætning</li>
          </ul>
        ) : null}
      </div>
    </section>
  );
};

export default App;

您可以在此處查看現場演示： https ://codesandbox.io/s/wizardly-sky-n2o5u0?file=/src/App.js:0-984