ReactStrap：当下拉列表很长时，用户看不到最后的值

Posted 2023-03-23

【中文标题】ReactStrap：当下拉列表很长时，用户看不到最后的值

【英文标题】：ReactStrap: When the dropdown list is long, the user cannot see the last values

【发布时间】：2020-08-28 10:08:28

【问题描述】：

我有这个下拉列表：

如您所见，它占据了整个屏幕，并且隐藏了一些项目。 代码如下：

  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>
);

由于它很长，用户看不到最后的值。 我已经搜索了如何使其可滚动。但是，我什么也没找到。 有关如何解决此问题的任何建议？

【参考方案1】：

尝试将此样式添加到 DropdownMenu 元素：

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

【讨论】：

感谢您确保使用引号：style= maxHeight: "500px", overflow: "scroll"