TreeSelect

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

Базовый импорт и использование:

import { TreeSelect } from 'antd';
import React, { useState } from 'react';

const { TreeNode } = TreeSelect;

const Demo = () => {
  const [value, setValue] = useState(undefined);

  const onCha nge = (newValue) => {
    setValue(newValue);
  };

  return (
    <TreeSelect
      style={{ width: 300 }}
      value={value}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      placeholder="Выберите значение"
      allowClear
      treeDefaultExpandAll
      onCha nge={onChange}
    >
      <TreeNode value="parent1" title="Родитель 1" key="0-1">
        <TreeNode value="child1" title="Дитя 1" key="0-1-1" />
        <TreeNode value="child2" title="Дитя 2" key="0-1-2" />
      </TreeNode>
      <TreeNode value="parent2" title="Родитель 2" key="0-2">
        <TreeNode value="child3" title="Дитя 3" key="0-2-1" />
      </TreeNode>
    </TreeSelect>
  );
};

Ключевые моменты:

  • value — текущее выбранное значение (или массив значений при множественном выборе).
  • onChange — обработчик изменения выбора.
  • allowClear — отображает кнопку очистки.
  • treeDefaultExpandAll — разворачивает все узлы по умолчанию.
  • dropdownStyle — позволяет задавать стили выпадающего списка.

Работа с множественным выбором

TreeSelect поддерживает множественный выбор, что делает компонент удобным для фильтров и выбора нескольких категорий.

<TreeSelect
  multiple
  value={value}
  onCha nge={onChange}
  treeCheckable={true}
  showCheckedStrategy={TreeSelect.SHOW_PARENT}
  placeholder="Выберите несколько значений"
  style={{ width: 300 }}
>
  <TreeNode value="parent1" title="Родитель 1" key="0-1">
    <TreeNode value="child1" title="Дитя 1" key="0-1-1" />
    <TreeNode value="child2" title="Дитя 2" key="0-1-2" />
  </TreeNode>
  <TreeNode value="parent2" title="Родитель 2" key="0-2">
    <TreeNode value="child3" title="Дитя 3" key="0-2-1" />
  </TreeNode>
</TreeSelect>

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

  • multiple — включает возможность выбирать несколько элементов.

  • treeCheckable — добавляет чекбоксы рядом с узлами.

  • showCheckedStrategy — определяет, какие значения отображаются в поле ввода:

    • SHOW_PARENT — отображает только родительские узлы, если все дочерние выбраны.
    • SHOW_CHILD — отображает только выбранные дочерние узлы.
    • SHOW_ALL — отображает все выбранные узлы.

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

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

<TreeSelect
  value={value}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  placeholder="Выберите значение"
  loadData={loadData}
  onCha nge={onChange}
  treeDefaultExpandAll
>
</TreeSelect>
const loadData = treeNode => {
  return new Promise(resolve => {
    setTimeout(() => {
      treeNode.children = [
        { title: 'Новый узел 1', value: 'new1', key: 'new1' },
        { title: 'Новый узел 2', value: 'new2', key: 'new2' }
      ];
      setTreeData([...treeData]); // обновляем состояние дерева
      resolve();
    }, 1000);
  });
};

Важные моменты:

  • loadData вызывается только для узлов без дочерних элементов.
  • Можно возвращать промис, что позволяет интегрировать TreeSelect с API.
  • После загрузки необходимо обновить состояние компонента с новыми данными.

Настройка поиска

TreeSelect поддерживает встроенный поиск, который может работать как по тексту, так и по значению.

<TreeSelect
  showSearch
  value={value}
  style={{ width: 300 }}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  placeholder="Поиск по узлам"
  allowClear
  treeDefaultExpandAll
  onCha nge={onChange}
  filterTreeNode={(inputValue, treeNode) =>
    treeNode.title.toLowerCase().includes(inputValue.toLowerCase())
  }
/>

Особенности поиска:

  • showSearch — активирует поле поиска.
  • filterTreeNode — позволяет полностью кастомизировать алгоритм фильтрации.
  • Можно использовать поиск по title или value, а также комбинировать с другими условиями.

Расширенные возможности и стилизация

TreeSelect легко стилизуется и интегрируется с другими компонентами Ant Design:

  • Стилизация узлов: Можно использовать свойство title для рендеринга JSX, что позволяет добавлять иконки, кастомные элементы или дополнительную информацию:
<TreeNode
  value="parent1"
  title={<span style={{ color: 'red' }}>Родитель 1</span>}
  key="0-1"
/>
  • Контроль состояния узлов: Свойства treeExpandedKeys, onTreeExpand позволяют контролировать, какие узлы открыты:
<TreeSelect
  treeExpandedKeys={expandedKeys}
  onTreeExp and={setExpandedKeys}
/>
  • Встроенная адаптивность: TreeSelect поддерживает полностью адаптивный интерфейс, автоматически подстраивая ширину и поведение выпадающего списка под контейнер.

Лучшие практики использования

  1. Использовать ключи (key) для всех узлов, чтобы избежать проблем с перерисовкой.
  2. Сразу определять value и onChange, чтобы компонент был управляемым.
  3. Для больших деревьев применять loadData, чтобы минимизировать начальную загрузку.
  4. При множественном выборе использовать treeCheckable и showCheckedStrategy, чтобы улучшить UX.
  5. Для кастомного поиска применять filterTreeNode, чтобы расширить возможности фильтрации.

Эти подходы обеспечивают максимальную гибкость и производительность при работе с TreeSelect в реальных приложениях.

Оглавление