问题描述
我想添加占位符纹理以使用 ReactJS 选择输入，但是我目前的尝试无效。
我的代码如下所示：
<Input type="select" placeholder="placeholder">
<option>First option</option>
<option>second option</option>
<option>Thrid option</option>
</Input>
在选择任何选项之前，我希望文本“占位符”显示在输入字段上，但是默认情况下会显示“第一个选项”。
1楼
为了在 ReactJS 中的<select>元素上实现占位符效果，首先将defaultValue添加到<select>元素并预先分配一个默认值，比如空字符串。
然后，添加一个禁用的<option>项，其值与defaultValue匹配，如下所示：
<select defaultValue="">
<option disabled={true} value="">placeholder</option>
<option>First option</option>
<option>second option</option>
<option>Thrid option</option>
</select>
更新
更稳健的方法如下：
<select defaultValue="">
<option hidden value="">placeholder</option>
<option>First option</option>
<option>second option</option>
<option>Thrid option</option>
</select>
2楼
您可以使用<option value="" hidden>此处的占位符</option>来实现此功能