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

Question

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

我的代码如下：

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

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

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

Answer 2

您可以使用以下方法实现此功能  <option value="" hidden>          您的占位符在这里  </option>