react-bootstrap中的可滚动下拉列表

Question

我正在尝试创建一些简单的出生日期下拉列表，并希望下拉列表上的滚动条显示固定数量的项目。我该如何使用react-bootstrap？目前，我的下拉列表不在屏幕上，并在整个页面上触发滚动条。

这是我的代码：

          <FormGroup>
            <Col componentClass={ControlLabel} sm={3}>
              Birth Date
            </Col>
            <Col sm={9}>
              <DropdownButton title="Month" id="birth-month">
                {createMonthSelectItems()}
              </DropdownButton>
              <DropdownButton title="Day" id="birth-day">
                {createDayOfMonthSelectItems()}
              </DropdownButton>
              <DropdownButton title="Year" id="birth-year">
                {createYearSelectItems()}
              </DropdownButton>
            </Col>
          </FormGroup>

另外，请告知这是否是个好主意。我需要此UI才能在移动设备和桌面上正常工作。

Answer 1

您可以通过为“.dropdown-menu”元素应用固定高度并设置“overflow-y: scroll;”来创建可滚动的下拉菜单。

反应代码：

import React, { Component } from 'react'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import './QuantityInput.css'

export default class QuantityInput extends Component {
  render() {
    return (
      <DropdownButton
        bsStyle="default"
        bsSize="small"
        style={{ maxHeight: "28px" }}
        title={"Qty"}
        key={1}
        id="dropdown-size-small"
      >
        <MenuItem eventKey="1">Action</MenuItem>
        <MenuItem eventKey="2">Another action</MenuItem>
        <MenuItem eventKey="3" active>
          Active Item
        </MenuItem>
        <MenuItem divider />
        <MenuItem eventKey="4">Separated link</MenuItem>
      </DropdownButton>
    )
  }
}

数量输入.css

.dropdown-menu {
  height: 70px;
  overflow-y: scroll;
}