[英]In React how open the dropdown when click a button from different function component
I wanted to do like when clicking on this join button, want to show the user registration form dropdown from the navbar component.我想在单击此加入按钮时做一些事情,想从导航栏组件中显示用户注册表单下拉列表。 I don't know how to do this s, can anyone help, please?
我不知道该怎么做,有人可以帮忙吗?
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
<ColorNavbar isMenuOpen={isMenuOpen} />
<Button
id="loyaltyButton"
className="text-center btn btn-lg btn-round mt-3 text-capitalize"
onClick={() => {
setIsMenuOpen(true);
}}
>
Join Now
</Button>
ColorNavbar.js ColorNavbar.js
<UncontrolledDropdown nav inNavbar>
<DropdownToggle className="mr-2 iconN" tag={Link}>
<img
className="megan-text pb-1"
src={require("assets/img/Page/Navbar/user3.png")}
alt="shoppingbag"
width="15"
height="20"
/>
<img
className="megan-text img-hover"
src={require("assets/img/Page/Navbar/user1.png")}
alt="shoppingbag"
width="15"
height="20"
/>
</DropdownToggle>
<DropdownMenu
className="dropdown w-25 "
right
id="nav-float-right"
isOpen={isMenuOpen}
>
<UserComponent />
</DropdownMenu>
</UncontrolledDropdown>
It's so simple, you can do something like this:很简单,你可以这样做:
NOTE: You can implement this logic on the dropdown that you have.注意:您可以在您拥有的下拉列表中实现此逻辑。
First component:第一个组件:
export default function First (){
const [show, setShow] = useState(true);
const handleShow = () => setShow(!show);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<hr />
<Second show={show} />
<button type="button" onClick={handleShow}>
Toggle the Component
</button>
</div>
);
}
Inside Second Component内部第二个组件
export default function SecondComponent ({show,handleHide}){
return (
<div hidden={show}>
<div>Hey! I'm here....</div>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.