<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 "поднимается" (bubbles).
• 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>, свяжите их, передав один и тот же ID для <select id> и <label htmlFor>. Для предотвращения конфликтов между несколькими экземплярами одного компонента, сгенерируйте такой ID с помощью 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>
    </>
  );
}