bootstrap 反应下拉关闭按钮

Question

我是 React 新手，我们的下拉菜单之一在移动设备视图中是全屏的，因此我们需要在菜单中添加一个关闭按钮。

const CloseMenu= (e) => {
    e?.preventDefault();
    // Some logic to close the 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>

我正在搜索但找不到解决方案。请指导我，谢谢。

Answer 1

OPs要求如下：

关闭时：点击切换 -> 显示下拉菜单
打开时：点击切换 -> 隐藏下拉菜单
打开时：在“X”上单击 -> 隐藏下拉菜单
打开时：点击外部 -> 隐藏下拉菜单

通过引入显示状态来控制 Dropdown。然后定义一个 onToggle 处理程序：

const [show, setShow] = React.useState(false);

...

<Dropdown show={show} onToggle={(isOpen) => setShow(isOpen)}>

当您点击“X”时，下拉菜单会自动关闭。这是由于 Dropdown 的属性 autoClose，默认设置为 true；

https://codesandbox.io/s/infallible-lake-d0tfgi

bootstrap 反应下拉关闭按钮

bootstrap react dropdown close button

react-bootstrap