在React

Question

我有一个带有许多选项的选择字段：

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

我正在使用React，由于我的页面上没有可用的高度，我想限制我的选择字段，以便当用户点击它时，不会看到所有10个选项，只有5个。

我查看并尝试了this answer并使用了所提及属性的camelcase版本（onBlur，onFocus）等，但这在React中无效，返回控制台错误。

Answer 1

您可以使用 onFocus 和 onBlur 事件来设置目标尺寸。

<select onFocus={(e) => e.target.size = 5} onBlur={(e) => e.target.size = 1}

jsfiddle example