<option>¶

Компонент встроенный в браузер <option> позволяет отобразить опцию внутри поля <select>.

1
2
3
4

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

Описание¶

<option>¶

Компонент встроенный в браузер option позволяет отобразить опцию внутри поля select.

1
2
3
4

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

Пропсы

<option> поддерживает все общие пропсы элементов.

Дополнительно, <option> поддерживает эти пропсы:

• disabled: Булево значение. Если true, опция не будет доступна для выбора и будет отображаться затемненной.
• label: Строка. Определяет значение опции. Если не указана, используется текст внутри опции.
• value: Значение, которое будет использоваться при отправке родительского <select> в форме, если выбран этот параметр.

Ограничения

• React не поддерживает атрибут selected для <option>. Вместо этого передайте value этой опции родителю <select defaultValue> для неуправляемого блока выбора или <select value> для управляемого блока выбора.

Использование¶

Отображение поля выбора с опциями¶

Для отображения поля выбора создайте <select> со списком компонентов <option> внутри. Задайте каждому <option> значение value, представляющее данные, которые должны быть представлены в форме.

Подробнее об отображении <select> со списком компонентов <option>.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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>
    );
}

Источник — https://react.dev/reference/react-dom/components/option

Комментарии