Select

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

Основные свойства Select

value – текущее выбранное значение. Может быть строкой, числом или массивом (для множественного выбора).
defaultValue – начальное значение при монтировании компонента.
onChange – функция обратного вызова, вызываемая при изменении выбранного значения. Получает выбранное значение в качестве аргумента.
placeholder – текст, отображаемый в пустом поле до выбора значения.
disabled – если установлено в true, компонент становится недоступным для взаимодействия.
mode – режим выбора:
- 'multiple' – множественный выбор.
- 'tags' – создание тегов на основе выбранных или введённых значений.
allowClear – добавляет кнопку очистки выбранного значения.
showSearch – включает поиск по элементам списка.

Пример базового использования:

import { Sel ect } from 'antd';
const { Option } = Select;

<Sel ect defaultValue="apple" style={{ width: 200 }} onCha nge={(value) => console.log(value)}>
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
  <Option value="cherry">Cherry</Option>
</Select>

Множественный выбор и теги

Множественный выбор позволяет пользователю выбрать несколько элементов из списка, а режим тегов позволяет добавлять новые значения, которых нет в исходном списке.

<Select
  mode="multiple"
  placeholder="Выберите фрукты"
  style={{ width: 300 }}
  onCha nge={(values) => console.log(values)}
>
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
  <Option value="cherry">Cherry</Option>
</Select>

<Select
  mode="tags"
  style={{ width: 300 }}
  placeholder="Добавьте теги"
  onCha nge={(tags) => console.log(tags)}
>
  <Option value="js">JavaScript</Option>
  <Option value="react">React</Option>
</Select>

Особенности режима tags:

Можно добавлять новые значения через ввод пользователя.
Выбранные элементы отображаются в виде тегов, их можно удалять.

Поиск по списку

Свойство showSearch позволяет включить поиск по элементам. По умолчанию поиск ведётся по тексту, отображаемому внутри <Option>.

<Select
  showSearch
  placeholder="Поиск фрукта"
  optionFilterProp="children"
  style={{ width: 250 }}
  onCha nge={(value) => console.log(value)}
>
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
  <Option value="cherry">Cherry</Option>
</Select>

Параметр optionFilterProp задаёт, по какому свойству Option будет выполняться фильтрация. Чаще всего используется children или value.

Для более сложного поиска можно использовать filterOption:

<Select
  showSearch
  placeholder="Поиск по начальной букве"
  filterOption={(input, option) =>
    option.children.toLowerCase().startsWith(input.toLowerCase())
  }
  style={{ width: 250 }}
>
  <Option value="apple">Apple</Option>
  <Option value="apricot">Apricot</Option>
  <Option value="banana">Banana</Option>
</Select>

Асинхронная загрузка данных

Select поддерживает динамическую подгрузку элементов, что удобно при большом списке или данных с сервера.

import { Select, Spin } fr om 'antd';
import { useState, useEffect } fr om 'react';

const AsyncSelect = () => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchData = (search) => {
    setLoading(true);
    setTimeout(() => {
      setOptions(
        ['Apple', 'Banana', 'Cherry', 'Date'].filter(item =>
          item.toLowerCase().includes(search.toLowerCase())
        )
      );
      setLoading(false);
    }, 500);
  };

  return (
    <Select
      showSearch
      placeholder="Поиск фрукта"
      notFoundContent={loading ? <Spin size="small" /> : null}
      filterOption={false}
      onSea rch={fetchData}
      style={{ width: 250 }}
    >
      {options.map(item => (
        <Select.Option key={item} value={item}>
          {item}
        </Select.Option>
      ))}
    </Select>
  );
};

Особенности асинхронного режима:

onSearch вызывается при вводе текста пользователем.
filterOption={false} отключает встроенный поиск, чтобы использовать кастомный.
notFoundContent позволяет отображать индикатор загрузки или сообщение о пустом списке.

Кастомизация отображения элементов

Select позволяет полностью кастомизировать внешний вид элементов с помощью labelInValue и собственных компонентов внутри <Option>.

<Select
  labelInValue
  defaultValue={{ value: 'apple', label: 'Apple ?' }}
  style={{ width: 250 }}
>
  <Option value="apple">
    <span role="img" aria-label="apple">?</span> Apple
  </Option>
  <Option value="banana">
    <span role="img" aria-label="banana">?</span> Banana
  </Option>
</Select>

labelInValue делает так, что onChange возвращает объект { value, label }, а не просто значение. Это удобно, когда нужно сохранить и отображаемый текст, и значение.

Стилизация и управление внешним видом

dropdownStyle – объект с CSS-стилями для выпадающего списка.
dropdownClassName – CSS-класс для выпадающего списка.
placement – позиция отображения списка (bottomLeft, bottomRight, topLeft, topRight).
getPopupContainer – функция для определения родителя, в котором будет рендериться список.

Пример кастомного стиля:

<Select
  style={{ width: 200 }}
  dropdownStyle={{ backgroundColor: '#f0f0f0', borderRadius: '4px' }}
  placeholder="Стилизованный Select"
>
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
</Select>

Обработка событий

Select поддерживает множество событий для полноценного управления поведением:

onSelect(value, option) – вызывается при выборе элемента.
onDeselect(value) – при снятии выбора в режиме множественного выбора.
onFocus() / onBlur() – при фокусе и потере фокуса.
onDropdownVisibleChange(open) – при открытии или закрытии выпадающего списка.

Пример логирования событий:

<Select
  style={{ width: 200 }}
  placeholder="Выберите фрукт"
  onSel ect={(value) => console.log('Selected:', value)}
  onDesel ect={(value) => console.log('Deselected:', value)}
  onDropdownVisibleCha nge={(open) => console.log('Dropdown open:', open)}
>
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
</Select>