Question

我想将下拉菜单的显示大小设置为仅显示5个值，然后在React js中应用滚动。

例如

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>

这适用于常规HTML格式。我希望它可以与React js一起使用。那么有可能实现这一目标吗？

<select onfocus="this.size = 5;" onblur="this.size = 1" onchange="this.size=1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>

Answer 1

尝试

onFocus={(e)=>{e.target.size = 5}}

对于其他人，请确保on之后的首字母大写。但是我认为如果创建这样的状态会更好

this.state = {
   size: 1
}

，然后将选择标签更改为

<select size={this.state.size} onFocus={()=>{this.setState({size: 5})}} onBlur={()=>{this.setState({size: 1})}} onChange={(e)=>{e.target.blur()}}>

这里是Jsfiddle

Answer 2

您可以使用textInputLayout.setErrorEnable(true);并通过为react-bootstrap元素应用fixed高度并设置.dropdown-menu

来创建可滚动下拉列表

例如

overflow-y: scroll;

QuantityInput.css

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

export default class ScrollableDrop 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 eventKey="4">Separated link</MenuItem>
      </DropdownButton>
    )
  }
}

OR

您可能想实现滚动加载的自定义下拉菜单

Implementing Infinite Scroll With React Js without any plugin

React JS-如何设置下拉菜单的显示大小？

2 个答案: