时间戳

首页 > 解决方案 > React js - 如何设置下拉菜单的显示大小？

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

问题描述

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

标签： javascriptreactjsmaterial-design

解决方案

尝试这个

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

推荐阅读