Cascader

Компонент Cascader используется для выбора значения из иерархических списков. Он особенно удобен при работе с вложенными категориями, регионами, подкатегориями товаров или любыми данными с несколькими уровнями вложенности. В Ant Design Cascader реализован как контрол с поддержкой поиска, динамической загрузки данных и кастомизации отображения элементов.

Структура данных

Для корректной работы Cascader требуется массив объектов с определённой структурой:

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

Ключевые моменты структуры:

  • value — уникальный идентификатор элемента, используемый для управления состоянием.
  • label — отображаемый текст.
  • children — массив дочерних элементов для следующего уровня вложенности.

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

import { Cascader } from 'antd';

function App() {
  const onCha nge = (value, selectedOptions) => {
    console.log(value, selectedOptions);
  };

  return <Cascader options={options} onCha nge={onChange} placeholder="Выберите элемент" />;
}

Пояснение:

  • options — массив данных.
  • onChange — коллбэк, вызываемый при выборе элемента. value — массив выбранных значений, selectedOptions — массив объектов выбранной цепочки.
  • placeholder — текст-заполнитель до выбора значения.

Динамическая загрузка данных (Lazy Loading)

Для работы с большим набором данных можно загружать дочерние элементы только при раскрытии родительского:

const loadData = selectedOptions => {
  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true;

  setTimeout(() => {
    targetOption.loading = false;
    targetOption.children = [
      { value: 'dynamic1', label: 'Dynamic 1' },
      { value: 'dynamic2', label: 'Dynamic 2' },
    ];
    setOptions([...options]);
  }, 1000);
};

Используется свойство loadData:

<Cascader options={options} loadData={loadData} changeOnSelect placeholder="Выберите значение" />;
  • changeOnSelect позволяет выбирать элементы на промежуточных уровнях без обязательного спуска до последнего уровня.
  • targetOption.loading показывает индикатор загрузки.

Поиск в Cascader

Cascader поддерживает встроенный поиск. Для настройки используется свойство showSearch:

<Cascader
  options={options}
  showSearch={{ filter, render }}
  placeholder="Поиск и выбор"
/>

Пример фильтрации:

const filter = (inputValue, path) =>
  path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
  • inputValue — текст, введённый пользователем.
  • path — цепочка элементов, ведущих к текущему объекту.
  • Фильтр возвращает true для тех путей, которые должны отображаться в результатах поиска.

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

Можно полностью изменить, как элементы будут отображаться:

const displayRender = labels => labels.join(' / ');

<Cascader options={options} displayRender={displayRender} placeholder="Кастомный вид" />
  • displayRender получает массив labels выбранного пути и возвращает строку для отображения в инпуте.

Выбор промежуточного уровня

По умолчанию Cascader позволяет выбирать только конечные элементы. Для выбора любого уровня используется:

<Cascader options={options} changeOnSelect placeholder="Выберите любой уровень" />
  • changeOnSelect открывает возможность выбирать родительские элементы без обязательного спуска к последнему уровню.

Работа с формами

Cascader полностью интегрируется с компонентом Form.Item:

import { Form, Cascader, Button } from 'antd';

<Form>
  <Form.Item name="location" label="Регион" rules={[{ required: true, message: 'Выберите значение' }]}>
    <Cascader options={options} placeholder="Выберите регион" />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">Отправить</Button>
  </Form.Item>
</Form>
  • Свойство rules обеспечивает валидацию выбора.
  • name привязывает компонент к полю формы для отправки данных.

Дополнительные свойства

  • disabled — полностью блокирует компонент.
  • allowClear — добавляет кнопку для очистки выбранного значения.
  • fieldNames — позволяет использовать нестандартные ключи в массиве опций:
<Cascader
  options={options}
  fieldNames={{ label: 'name', value: 'id', children: 'nodes' }}
/>
  • popupPlacement — управление позицией выпадающего списка (bottomLeft, topLeft и др.).

Практические рекомендации

  1. Для больших и динамических деревьев рекомендуется использовать loadData и changeOnSelect.
  2. Всегда задавать уникальные значения value, иначе компонент может работать некорректно.
  3. При кастомном поиске showSearch.filter позволяет полностью контролировать видимые результаты.
  4. Интеграция с Form позволяет использовать Cascader для сложных форм с валидацией.

Cascader — мощный инструмент для построения многоуровневых селектов с гибкой кастомизацией, поддержкой поиска и динамической загрузки данных, что делает его незаменимым в современных интерфейсах Ant Design.

Оглавление