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

QuantityInput.css

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