<select>

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

• Справочник
  • <select>
• Использование
  • Отображение выпадающего списка с опциями
  • Добавление метки для выпадающего списка
  • Выделение начальной опции
  • Включение множественного выбора
  • Чтение значения выпадающего списка при отправке формы
  • Управление выпадающим списком с помощью переменной состояния

Справочник

<select>

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

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

См. примеры ниже.

Свойства

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

Вы можете сделать выпадающий список управляемым, передав свойство value:

• value: Строка (или массив строк для multiple={true}). Управляет выбранной опцией. Каждая строка значения соответствует value некоторой <option> внутри <select>.

При передаче value, необходимо также передать обработчик onChange, который обновляет переданное значение.

Если ваш <select> не управляемый, вы можете передать свойство defaultValue:

• defaultValue: Строка (или массив строк для multiple={true}). Определяет изначально выбранную опцию.

Эти <select> свойства актуальны как для управляемых, так и для неуправляемых выпадающих списков:

• autoComplete: Строка. Определяет один из возможных режимов автозаполнения.
• autoFocus: Логическое значение. Если true, React сфокусирует элемент при монтировании.
• children: <select> принимает <option>, <optgroup> и <datalist> компоненты в качестве потомков. Вы также можете передать свои собственные компоненты, если они в конечном итоге отображают один из разрешенных компонентов. Если вы передадите свои собственные компоненты, которые в конечном итоге отображают теги <option>, каждый <option> элемент, который вы отображаете, должен иметь value.
• disabled: Логическое значение. Если true, выпадающий список не будет интерактивным и будет отображаться затемненным.
• form: Строка. Определяет id формы, к которой принадлежит этот выпадающий список. Если опущено, используется ближайшая родительская форма.
• multiple: Логическое значение. Если true, браузер позволяет множественный выбор.
• name: Строка. Указывает имя для этого выпадающего списка, которое передается с формой.
• onChange: Функция-обработчик Event. Требуется для управляемых выпадающих списков. Срабатывает немедленно, когда пользователь выбирает другую опцию. Ведёт себя как событие браузера input.
• onChangeCapture: Версия onChange, которая срабатывает на фазе захвата.
• onInput: Функция-обработчик Event. Срабатывает немедленно, когда пользователь изменяет значение. По историческим причинам в React принято использовать onChange, которое работает аналогично.
• onInputCapture: Версия onInput, которая срабатывает на фазе захвата.
• onInvalid: Функция-обработчик Event. Срабатывает, если ввод не проходит проверку при отправке формы. В отличие от встроенного события invalid, событие React onInvalid перехватывается.
• onInvalidCapture: Версия onInvalid, которая срабатывает на фазе захвата.
• required: Логическое значение. Если true, значение должно быть предоставлено для отправки формы.
• size: Число. Для multiple={true} выпадающих списков задаёт количество первоначально видимых элементов.

Ограничения

• В отличие от HTML, передача атрибута selected к элементу <option> не поддерживается. Вместо этого используйте <select defaultValue> для неуправляемых выпадающих списков и <select value> для управляемых выпадающих списков.
• Если выпадающий список получает свойство value , он будет обработан как управляемый.
• Выпадающий список не может быть одновременно управляемым и неуправляемым.
• Выпадающий список не может переключаться между управляемым и неуправляемым состоянием в течение своего жизненного цикла.
• Каждый управляемый выпадающий список требует обработчика события onChange , который синхронно обновляет его базовое значение.

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

Отображение выпадающего списка с опциями

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

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

Добавление метки для выпадающего списка

Обычно каждый <select> помещается внутри тега <label>. Это указывает браузеру, что эта метка связана с этим выпадающим списком. Когда пользователь кликает на метку, браузер автоматически фокусируется на выпадающем списке. Это также важно для доступности: средство чтения с экрана объявит заголовок метки, когда пользователь сфокусируется на выпадающем списке.

Если вы не можете вложить <select> в <label>, свяжите их, передав один и тот же идентификатор в <select id> и <label htmlFor>. Чтобы избежать конфликтов между несколькими экземплярами одного компонента, сгенерируйте такой идентификатор с помощью useId.

import { useId } from 'react';

export default function Form() {
  const vegetableSelectId = useId();
  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>
      <hr />
      <label htmlFor={vegetableSelectId}>
        Pick a vegetable:
      </label>
      <select id={vegetableSelectId} name="selectedVegetable">
        <option value="cucumber">Cucumber</option>
        <option value="corn">Corn</option>
        <option value="tomato">Tomato</option>
      </select>
    </>
  );
}

Выделение начальной опции

По умолчанию браузер выберет первый <option> в списке. Чтобы по умолчанию выбрать другую опцию, передайте <option> в качестве value элементу defaultValue.

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

Включение множественного выбора

Передайте multiple={true} элементу <select>, чтобы разрешить пользователю выбрать несколько опций. В этом случае, если вы также указываете defaultValue для выбора начальных выбранных опций, оно должно быть массивом.

export default function FruitPicker() {
  return (
    <label>
      Pick some fruits:
      <select
        name="selectedFruit"
        defaultValue={['orange', 'banana']}
        multiple={true}
      >
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}

Чтение значения выпадающего списка при отправке формы

Окружите свой выпадающий список <form> с <button type="submit"> внутри. Это вызовет ваш обработчик события <form onSubmit> . По умолчанию браузер отправит данные формы на текущий URL и обновит страницу. Вы можете изменить это поведение, вызвав e.preventDefault(). Прочитайте данные формы с помощью new FormData(e.target).

export default function EditPost() {
  function handleSubmit(e) {
    // Prevent the browser from reloading the page
    e.preventDefault();
    // Read the form data
    const form = e.target;
    const formData = new FormData(form);
    // You can pass formData as a fetch body directly:
    fetch('/some-api', { method: form.method, body: formData });
    // You can generate a URL out of it, as the browser does by default:
    console.log(new URLSearchParams(formData).toString());
    // You can work with it as a plain object.
    const formJson = Object.fromEntries(formData.entries());
    console.log(formJson); // (!) This doesn't include multiple select values
    // Or you can get an array of name-value pairs.
    console.log([...formData.entries()]);
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        Pick your favorite fruit:
        <select name="selectedFruit" defaultValue="orange">
          <option value="apple">Apple</option>
          <option value="banana">Banana</option>
          <option value="orange">Orange</option>
        </select>
      </label>
      <label>
        Pick all your favorite vegetables:
        <select
          name="selectedVegetables"
          multiple={true}
          defaultValue={['corn', 'tomato']}
        >
          <option value="cucumber">Cucumber</option>
          <option value="corn">Corn</option>
          <option value="tomato">Tomato</option>
        </select>
      </label>
      <hr />
      <button type="reset">Reset</button>
      <button type="submit">Submit</button>
    </form>
  );
}

Управление выпадающим списком с помощью переменной состояния

Выпадающий список, такой как <select />, является неуправляемым. Даже если вы передаёте начальное выбранное значение, например, <select defaultValue="orange" />, ваш JSX указывает только начальное значение, а не текущее.

Для отображения управляемого выпадающего списка передайте свойство value в него. React заставит выпадающий список всегда иметь значение value, которое вы передали. Обычно вы управляете выпадающим списком, объявляя переменную состояния:

function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
  // ...
  return (
    <select
      value={selectedFruit} // ...force the select's value to match the state variable...
      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
    >
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
  );
}

Это полезно, если вы хотите повторно отобразить часть пользовательского интерфейса в ответ на каждое выбранное значение.

import { useState } from 'react';

export default function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('orange');
  const [selectedVegs, setSelectedVegs] = useState(['corn', 'tomato']);
  return (
    <>
      <label>
        Pick a fruit:
        <select
          value={selectedFruit}
          onChange={e => setSelectedFruit(e.target.value)}
        >
          <option value="apple">Apple</option>
          <option value="banana">Banana</option>
          <option value="orange">Orange</option>
        </select>
      </label>
      <hr />
      <label>
        Pick all your favorite vegetables:
        <select
          multiple={true}
          value={selectedVegs}
          onChange={e => {
            const options = [...e.target.selectedOptions];
            const values = options.map(option => option.value);
            setSelectedVegs(values);
          }}
        >
          <option value="cucumber">Cucumber</option>
          <option value="corn">Corn</option>
          <option value="tomato">Tomato</option>
        </select>
      </label>
      <hr />
      <p>Your favorite fruit: {selectedFruit}</p>
      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
    </>
  );
}