ReactStrap：当下拉列表较长时，用户无法看到最后的值。

Question

我有这个下拉列表。

如你所见，它占据了整个屏幕，有些项目被隐藏了。下面是代码。

  const statusSearchDropDownValues = (
  <Row className="align-items-center">
    <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
      <Dropdown
        isOpen={this.state.statusSearchropDownOpen}
        toggle={() => {
          this.toggleStatusSearchDropDown();
        }}
      >
        <DropdownToggle className="my-dropdown" caret>
          {this.state.statusSearchDropDownValue}
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem>
            {" "}
            <div
              value="operation_cree"
              onClick={this.changeStatusSearchDropDownValue}
            >
              Operation créée
            </div>
          </DropdownItem>
          {/* Multiple other DropdownItems */}
        </DropdownMenu>
      </Dropdown>
    </Col>
  </Row>
);

由于它很长，用户无法看到最后的值。 我已经搜索了如何使它可滚动。但是，我没有找到任何东西。任何建议，如何解决这个问题？

Answer 1

试着将这种样式添加到DropdownMenu元素中。

...
 <DropdownMenu style={{maxHeight:"200px", overflow:"scroll"}}>
...