Селекты в стейтах React

В статьях "Инпуты в стейтах React" и "Чекбоксы и радио кнопки в стейтах React" обсуждалась тема получения данных из таких HTML элементов как input (типа text, radio, checkbox) и textarea. В этой статье продолжим развивать её, поговорив о работе выпадающих списков "select".

Для того чтобы этот HTML элемент работал в React, необходимо воспользоваться той же логикой, что и в предыдущих статьях: создать событие onChange, по которому изменять значение поля. Продемонстрируем это на примере:

import React, { useState } from 'react';

function App() {
   const [value, setValue] = useState('');

   function chengeSelect() {
      setValue(event.target.value);
   }

   return <div>
      <select value={value} onChange={chengeSelect}>
         <option>Мышь</option>
         <option>Кот</option>
         <option>Сыр</option>
         <option>Молоко</option>
      </select>
      <p>
         Выбрана опция: {value}
      </p>
   </div>;
}

export default App;

Если выполнить такой код, то на странице появится выпадающий список. При выброе в нём пунктов будет изменяться надпись "Выбрана опция: *" под списком.

В реальных проектах чаще используется атрибут value тега options. Поэтому для отображения данных, зависящих от значения в value используют такой приём:

import React, { useState } from 'react';

function App() {
   const [value, setValue] = useState('');

   function chengeSelect() {
      setValue(event.target.value);
   }

   return <div>
      <select value={value} onChange={chengeSelect}>
         <option value="mouse">Мышь</option>
         <option value="cat">Кот</option>
         <option value="cheese">Сыр</option>
         <option value="milk">Молоко</option>
      </select>
      <p>
         {value == 'mouse' && 'Вы выбрали Мышь'}
         {value == 'cat' && 'Вы выбрали Кота'}
         {value == 'cheese' && 'Вы выбрали Сыр'}
         {value == 'milk' && 'Вы выбрали Молоко'}
      </p>
   </div>;
}

export default App;

Обычно списки часто формируются из информации, полученной из базы данных. Поэтому перепишем код примера так, чтобы список формировался из массива элементов с помощью метода "map". А чтобы упростить код, используем стрелочную функцию для изменения значения в выпадающем списке. Получится так:

import React, { useState } from 'react';

function App() {
   const arOptions = ['Мышь', 'Кот', 'Сыр', 'Молоко'];
   const [value, setValue] = useState('');

   const options = arOptions.map((text, index) => {
      return <option key={index}>{text}</option>;
   });

   return <div>
      <select value={value} onChange={(event) => setValue(event.target.value)}>
         {options}
      </select>
      <p>
         Выбрана опция: {value}
      </p>
   </div>;
}

export default App;

Этот пример будет выводить под списком строку "Выбрана опция: *название*" , в которой будет находиться название выбранного пункта. Чтобы сделать более сложные условия вывода, стоит можно улучшить, добавив атрибут value. При этом текст примера можно получать из массива, обращаясь к элементу по его номеру. Продемонстрируем это:

import React, { useState } from 'react';

function App() {
   const arOptions = ['Мышь', 'Кот', 'Сыр', 'Молоко'];
   const [value, setValue] = useState('');

   const options = arOptions.map((text, index) => {
      return <option key={index} value={index}>{text}</option>;
   });

   return <div>
      <select value={value} onChange={(event) => setValue(event.target.value)}>
         {options}
      </select>
      <p>
         Выбрана опция: {arOptions[value}}
      </p>
   </div>;
}

export default App;