Question

所以我在使用react-bootstrap下拉菜单时发现一个无法关闭的错误。实际上它在屏幕上水平呈现了所有选项。

我在Stackoverflow上进行了搜索。几乎没有类似的帖子，但都没有关于React的帖子

        <DropdownButton
          title={this.state.selectedOption}
          id="document-type"
          onSelect={this.handleSelect.bind(this)}
        >
          {myoptions.map((opt, i) => (
            <Dropdown.Item key={i} eventKey={i}>
              {opt}
            </Dropdown.Item>
          ))}`enter code here`
        </DropdownButton>

我期望正常行为

Answer 1

根据docs，

下拉菜单是可切换的上下文叠加层，用于显示链接列表等。与叠加层一样，下拉菜单是使用第三方库Popper.js构建的，该库提供了动态定位和视口检测功能。

您还需要添加bootstrap.css，方法是在link中添加index.html

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

或通过导入index.js文件。

在popper中添加index.html

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>

Demo

React Bootstrap下拉菜单没有关闭，而是水平渲染

1 个答案: