Select React 中的元素占位符

Question

我正在尝试将 placeholer 添加到 select 反应中的元素。目前我正在使用：

<option disabled selected hidden>{props.placeholder || "Select options"}</option>

但我收到警告：

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

我已经尝试了 defaultValue 和其他几个，但没有任何效果。

干杯，丹尼尔

Answer 1

在 React 中，您不需要将 selected 属性添加到选项标签，但您需要在 select-标签中指定一个 defaultValue prop (Uncontrolled Component) or define the value prop (Controlled Component)。

这里有一个不受控制的例子：

<select defaultValue="apple">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

Select element placeholder in react