Transfer

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

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

Transfer обладает множеством настроек, ключевые из которых:

  • dataSource – массив объектов с данными, каждый элемент должен содержать уникальное поле key. Пример структуры:
[
  { key: '1', title: 'Элемент 1', description: 'Описание 1', disabled: false },
  { key: '2', title: 'Элемент 2', description: 'Описание 2', disabled: false },
]
  • targetKeys – массив ключей элементов, которые находятся в правом списке (цели).
  • selectedKeys – массив ключей элементов, которые выделены в обоих списках.
  • onChange – функция, вызываемая при перемещении элементов между списками. Принимает параметры (nextTargetKeys, direction, moveKeys):
const handleChange = (nextTargetKeys, direction, moveKeys) => {
  console.log(nextTargetKeys, direction, moveKeys);
};
  • render – функция для кастомного отображения элементов списка. Принимает объект элемента и возвращает JSX:
const renderItem = item => ({
  label: `${item.title} - ${item.description}`,
  value: item.title,
});

  • rowKey – функция, возвращающая уникальный ключ для элемента, по умолчанию используется item.key.

  • disabled – делает компонент полностью неактивным.

Настройка фильтрации

Для поиска элементов в списках используется свойство showSearch и функция filterOption:

<Transfer
  showSearch
  filterOption={(inputValue, item) =>
    item.title.toLowerCase().includes(inputValue.toLowerCase())
  }
/>
  • showSearch включает поле поиска.
  • filterOption позволяет задать кастомную логику фильтрации.

Кастомизация заголовков и сообщений

Заголовки списков задаются через titles:

titles={['Доступные элементы', 'Выбранные элементы']}

Можно также настроить сообщения при пустых списках:

notFoundContent="Элементы не найдены"

Вертикальный и горизонтальный режим

По умолчанию Transfer отображается горизонтально с двумя колонками. Горизонтальная ориентация задается через свойство listStyle и кастомные стили:

listStyle={{ width: 250, height: 300 }}

Состояние выбранных элементов

Для управления выделением используется selectedKeys и события onSelectChange:

const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
  console.log(sourceSelectedKeys, targetSelectedKeys);
};

Это позволяет синхронизировать состояние с внешним хранилищем или использовать его в форме.

Контроль перемещения элементов

Компонент поддерживает управление через свойства oneWay и disabled для отдельных элементов:

  • oneWay делает перемещение однонаправленным (из источника в цель без обратного перемещения).
  • disabled на уровне элемента предотвращает его перемещение.
const data = [
  { key: '1', title: 'Элемент 1', disabled: true },
  { key: '2', title: 'Элемент 2' },
];

Интеграция с формами

Transfer легко интегрируется с Form.Item из Ant Design. Для отправки выбранных элементов используется valuePropName="targetKeys":

<Form.Item
  name="selectedItems"
  label="Выберите элементы"
  valuePropName="targetKeys"
>
  <Transfer
    dataSource={data}
    render={item => item.title}
  />
</Form.Item>

Кастомизация элементов списка

Для более сложного отображения элементов можно использовать render с компонентами Ant Design:

render={item => (
  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
    <span>{item.title}</span>
    <Tag color="blue">{item.description}</Tag>
  </div>
)}

События

Основные события Transfer:

  • onChange(nextTargetKeys, direction, moveKeys) – перемещение элементов.
  • onSelectChange(sourceSelectedKeys, targetSelectedKeys) – изменение выделения.
  • onScroll(direction, e) – скролл в левом или правом списке.

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

Оптимизация больших списков

Для работы с большими массивами данных можно использовать виртуализацию. С помощью свойства virtual можно включить поддержку виртуального скролла:

<Transfer
  dataSource={largeData}
  render={item => item.title}
  virtual
/>

Это значительно повышает производительность при тысячах элементов.

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

<Transfer
  dataSource={data}
  titles={['Доступные', 'Выбранные']}
  targetKeys={targetKeys}
  selectedKeys={selectedKeys}
  onCha nge={handleChange}
  onSelectCha nge={handleSelectChange}
  render={renderItem}
  showSearch
  filterOption={(inputValue, item) =>
    item.title.toLowerCase().includes(inputValue.toLowerCase())
  }
  listStyle={{ width: 300, height: 400 }}
/>

В этом примере реализовано:

  • Два списка с заголовками
  • Выбор и фильтрация элементов
  • Кастомное отображение каждого элемента
  • Контроль состояния выбранных элементов
  • Настройка размеров списков

Ключевые моменты работы с Transfer

  • Уникальные ключи обязательны для корректного функционирования.
  • События onChange и onSelectChange позволяют полностью контролировать состояние компонента.
  • Кастомизация через render и filterOption делает компонент гибким для любых интерфейсов.
  • Виртуализация обязательна при больших объемах данных для сохранения производительности.
  • Интеграция с формами через valuePropName="targetKeys" упрощает работу с Ant Design Form.

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

Оглавление