如何让一个下拉菜单消失，一旦你打开它，并在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