引导响应下拉关闭按钮
引导响应下拉关闭按钮
提问于 2022-03-28 14:45:42
我是新的反应，我们的下拉列表之一是全屏幕上的移动视图，所以我们需要一个关闭按钮内的菜单。
const CloseMenu= (e) => {
e?.preventDefault();
// Some logic to close the dropdown
}DropDown
<Dropdown>
<Dropdown.Toggle variant="link">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<h4>Menu Title</h4>
<Button variant="link" onClick={CloseMenu}> X </Button>
</Dropdown.Header>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>我在寻找，但找不到解决办法。请指点我，谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-28 16:53:02
业务行动的要求如下：
- 关闭时:在切换时单击->显示下拉
- ：在打开时单击->隐藏下拉列表
- ：在"X“上单击->隐藏下拉列表
- ：在外部单击->隐藏下拉列表
通过引入一个显示状态来控制您的下拉列表。然后定义一个onToggle处理程序：
const [show, setShow] = React.useState(false);..。
<Dropdown show={show} onToggle={(isOpen) => setShow(isOpen)}>当您单击"X“时，下拉列表将自动关闭。这是由于下拉列表的属性autoClose，它在默认情况下设置为true；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71649321
复制相关文章
相似问题
腾讯云开发者
