React Выпадающий список

Выпадающий список, или селектор, в React также функционирует немного иначе, чем в обычном HTML.

Основное различие связано с определением выбранного значения.

В HTML выбранное значение в выпадающем списке задаётся с помощью атрибута selected:

HTML:


<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

В React выбранное значение задаётся с помощью атрибута value на самом элементе <select>:

Пример

React использует атрибут value для управления выбранным значением в выпадающем списке:


function MyForm() {
  const [myCar, setMyCar] = useState("Volvo"); // начальное значение

  const handleChange = (event) => {
    setMyCar(event.target.value); // обновляем состояние при выборе нового пункта
  };

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  );
}

Пояснение к примеру:

Изначально выбрано значение "Volvo", так как это значение установлено в состоянии компонента через useState.
При каждом изменении значения в выпадающем списке срабатывает обработчик события handleChange, который обновляет состояние компонента.
Атрибут value привязывается к состоянию компонента, что позволяет React полностью контролировать поведение выпадающего списка.

Таким образом, изменяя способ управления элементом <select>, React обеспечивает единообразное поведение этого элемента с остальными элементами ввода.