内置浏览器 <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>
属性
¥Props
<option>
支持所有 普通元素属性。
¥<option>
supports all common element props.
此外,<option>
支持这些属性:
¥Additionally, <option>
supports these props:
-
disabled
:一个布尔值。如果是true
,则该选项将不可选择且显示为灰色。¥
disabled
: A boolean. Iftrue
, 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’svalue
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> ); }