javascript - React js - 如何设置下拉菜单的显示大小?

标签 javascript reactjs material-design

我想将下拉列表的显示大小设置为仅显示 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>

最佳答案

试试这个

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

关于javascript - React js - 如何设置下拉菜单的显示大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52928763/

相关文章:

javascript - Protractor 通过 ng-click 进行迭代

javascript - 由于其他代码在间隔之间运行,setInterval 函数的间隔不均匀;

android - 无法使 ProgressBar 使用 Material 设计风格

css - react-transition-group CSSTransition 滑入渲染

c# - WPF DatePicker 没有使用 Material Design 的样式

android - 使用工具栏时无法设置操作模式样式

javascript - 在 JavaScript 中定义属性和命名约定

javascript - 电话号码验证正则表达式

javascript - Break 语句不会退出 JavaScript 中的所有嵌套循环

javascript - JXS if else 类不起作用