ReactJS：如何在选择输入上显示占位符

Question

我想添加占位符纹理以使用 ReactJS 选择输入，但是我目前的尝试无效。

我的代码如下所示：

<Input type="select" placeholder="placeholder">
     <option>First option</option>
     <option>second option</option>
     <option>Thrid option</option>
</Input>

在选择任何选项之前，我希望文本“占位符”显示在输入字段上，但默认情况下会显示“第一个选项”。

Answer 1

要<select>在 ReactJS 中对元素实现占位符效果，首先将defaultValueprop添加到<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>