为什么我的 React Bootstrap 下拉菜单没有关闭

Question

我正在尝试使用 React-Bootstrap 中的下拉菜单，但无法使其工作。它不会关闭（而且它不是垂直的，只有当我使用带有

display: flex

和

flex-direction: column

的 CSS 时）（我使用的是 2.10.7 版本）：

它在

div

里面。当我第二次点击 i 时，它变成这样：

这是代码：

function DropdownMenu() {
    return (
        <Dropdown>
            <Dropdown.Toggle className={styles.dropdowntoggle} variant="success" id="dropdown-basic">
                Dropdown Button
            </Dropdown.Toggle>

            <Dropdown.Menu>
                <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>
    );
}

export default DropdownMenu;

唯一使用的 CSS 是

Dropdown.Toggle

上的背景颜色。

我尝试过使用简化版本。我尝试使用

onToggle

和

onClick

与“显示”状态，使用

show

道具。没用。

我已经安装了 React Bootstrap 和 Bootstrap。

编辑：styles.dropdowntoggle 用于在此组件上使用 CSS。

autoClose 属性也不起作用。

Answer 1

确保导入引导程序

import 'bootstrap/dist/css/bootstrap.min.css';

如果尚未安装，则需要安装

npm install bootstrap

如果我使用你的代码（并取出

className={styles.dropdowntoggle}

并像上面一样导入引导程序，它看起来像

---

还有

className={styles.dropdowntoggle}

应该是

style={styles.dropdowntoggle}

或

className="..."