[英]How to make a dropdown menu disappear once you open it and click on a specific category in React
I'm having a problem with a dropdown menu which remains on the screen after i click on it and choose a specific category, which is being displayed in a box after i click on it.我有一个下拉菜单的问题,在我点击它并选择一个特定的类别后,它仍然在屏幕上,我点击它后显示在一个框中。 So everything works fine except the dropdown is not disappering, and i would like it to disapper once i click on the category.所以一切正常,除了下拉菜单没有消失,我希望它在我点击类别后消失。
I tried to create a function (const handleMenuOne) where I could both remove the dropdown menu and display the category text in the box at the same time but it doesn't work.我试图创建一个函数 (const handleMenuOne),我可以在其中删除下拉菜单并同时在框中显示类别文本,但它不起作用。 Any idea how I can make this dropdown disappear and display the category in the box at the same time?知道如何让这个下拉菜单消失并同时在框中显示类别吗?
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;
Here's the solution.这是解决方案。 You can use 2 state
variables.您可以使用 2 个state
变量。 And I have removed a bunch of functions from your code.而且我已经从您的代码中删除了一堆功能。
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;
You can check the live demo here: https://codesandbox.io/s/wizardly-sky-n2o5u0?file=/src/App.js:0-984您可以在此处查看现场演示: https ://codesandbox.io/s/wizardly-sky-n2o5u0?file=/src/App.js:0-984
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.