内置浏览器 <option> 组件 允许你在 <select> 框内渲染选项。

¥The built-in browser <option> component lets you render an option inside a <select> box.

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

参考

¥Reference

<option>

内置浏览器 <option> 组件 允许你在 <select> 框内渲染选项。

¥The built-in browser <option> component lets you render an option inside a <select> box.

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

请参阅下面的更多示例。

¥See more examples below.

属性

¥Props

<option> 支持所有 普通元素属性。

¥<option> supports all common element props.

此外，<option> 支持这些属性：

¥Additionally, <option> supports these props:

  • disabled：一个布尔值。如果是 true，则该选项将不可选择且显示为灰色。

    ¥disabled: A boolean. If true, the option will not be selectable and will appear dimmed.

  • label：一个字符串。指定选项的含义。如果未指定，则使用选项内的文本。

    ¥label: A string. Specifies the meaning of the option. If not specified, the text inside the option is used.

  • value：如果选择此选项，则使用 在表单中提交父 <select> 时 的值。

    ¥value: The value to be used when submitting the parent <select> in a form if this option is selected.

注意事项

¥Caveats

  • React 不支持 <option> 上的 selected 属性。而是，将此选项的 value 传递给父级 <select defaultValue> 以获得不受控制的选择框，或将 <select value> 传递给受控选择框。

    ¥React does not support the selected attribute on <option>. Instead, pass this option’s value to the parent <select defaultValue> for an uncontrolled select box, or <select value> for a controlled select.

用法

¥Usage

显示带有选项的选择框

¥Displaying a select box with options

渲染一个 <select>，其中包含一个 <option> 组件列表，以显示一个选择框。给每个 <option> 一个 value，代表要随表单提交的数据。

¥Render a <select> with a list of <option> components inside to display a select box. Give each <option> a value representing the data to be submitted with the form.

阅读有关显示带有 <option> 组件列表的 <select> 的更多信息。

¥Read more about displaying a <select> with a list of <option> components.

export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}
上一章<input>
下一章<progress>