浏览器内置的 <option> 组件 允许你渲染 <select> 组件的选项(option)。

<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>

参考

<option>

浏览器内置的 <option> 组件 允许你渲染 <select> 组件的选项(option)。

<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>

参见下面更多示例

Props

<option> 支持所有 常见的元素属性

除此之外,<option> 还支持以下属性:

  • disabled:布尔值。如果 disabledtrue,该选项(option)将会被选中,并将展示为暗淡状态(dimmed)。
  • label:字符串。指定选项的含义。如果未指定,则使用选项内部的文本。
  • value:如果选择了此选项,则在提交表单时将使用此选项的 value 值作为父级 <select> 的值。详细信息请参阅 在提交表单时读取 <select>

注意

  • React 不支持在 <option> 上使用 selected 属性。相反,对于非受控选择框,请将此选项的 value 属性传递给父级 <select defaultValue>;对于受控选择框,请使用 <select value> 来控制选择框的值。

用法

显示带有选项的选择框

渲染一个包含一系列 <option> 组件的 <select>,来展示一个选择框,并给每个 <option> 都设置一个 value 属性,表示要与表单一起提交的数据。

在这里了解更多关于 如何展示一个包含一系列 <option> 组件的 <select> 的信息。

export default function FruitPicker() {
  return (
    <label>
      选择一个水果:
      <select name="精选水果">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="橘子">橘子</option>
      </select>
    </label>
  );
}