Mentions

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

Основные возможности

  • Автодополнение по символу-триггеру. Обычно используется символ @ для упоминаний. При вводе этого символа компонент открывает список вариантов.
  • Фильтрация элементов по введённой строке, поддерживается пользовательская логика фильтрации.
  • Поддержка кастомных элементов через Option, что позволяет использовать любую разметку внутри списка.
  • События для интеграции с бизнес-логикой, например, onChange, onSelect и onSearch.
  • Контроль состояния через свойства value и defaultValue.

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

import { Mentions } from 'antd';

const { Option } = Mentions;

function App() {
  return (
    <Mentions
      style={{ width: '100%' }}
      placeholder="Введите текст с упоминанием"
    >
      <Option value="Alice">Alice</Option>
      <Option value="Bob">Bob</Option>
      <Option value="Charlie">Charlie</Option>
    </Mentions>
  );
}
  • Mentions – контейнер для ввода текста с поддержкой автодополнения.
  • Option – отдельный вариант для упоминания, value используется при вставке в текст.
  • style – позволяет задавать размеры и оформление компонента.

При вводе символа @ открывается список Option, и пользователь может выбрать элемент, который будет вставлен в текст.

Управление значением

Компонент может быть как контролируемым, так и неконтролируемым.

Контролируемый пример:

import { Mentions } from 'antd';
import { useState } from 'react';

const { Option } = Mentions;

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

  return (
    <Mentions
      value={value}
      onCha nge={setValue}
      style={{ width: '100%' }}
    >
      <Option value="Alice">Alice</Option>
      <Option value="Bob">Bob</Option>
    </Mentions>
  );
}
  • value – текущее значение компонента.
  • onChange – функция обратного вызова, вызывается при изменении текста.

Контролируемый компонент полезен при необходимости интеграции с формами или хранении текста в состоянии приложения.

События

Компонент поддерживает ключевые события:

  • onChange(value) – срабатывает при изменении текста.
  • onSelect(option, prefix) – вызывается при выборе варианта из списка; option содержит объект выбранного элемента, prefix – символ-триггер.
  • onSearch(text, prefix) – вызывается при вводе текста после символа-триггера, удобно для динамической подгрузки опций.

Пример использования onSearch для динамической фильтрации:

import { Mentions } from 'antd';
import { useState } from 'react';

const { Option } = Mentions;
const users = ['Alice', 'Bob', 'Charlie', 'David'];

function DynamicMentions() {
  const [filteredUsers, setFilteredUsers] = useState(users);

  const handleSearch = (text) => {
    setFilteredUsers(users.filter(user => user.toLowerCase().includes(text.toLowerCase())));
  };

  return (
    <Mentions style={{ width: '100%' }} onSea rch={handleSearch}>
      {filteredUsers.map(user => (
        <Option key={user} value={user}>{user}</Option>
      ))}
    </Mentions>
  );
}
  • Позволяет динамически подгружать или фильтровать список пользователей.
  • onSearch используется для запроса к API или локальной фильтрации.

Настройка триггера и разметки

По умолчанию триггер – @. Его можно изменить через свойство prefix:

<Mentions prefix={['@', '#']}>
  <Option value="Alice">Alice</Option>
  <Option value="React">React</Option>
</Mentions>
  • Множественные префиксы позволяют использовать компонент и для хэштегов (#), и для упоминаний (@).
  • Option может содержать любую JSX-разметку, например, аватар и имя пользователя:
<Option value="Alice">
  <img src="alice.png" alt="Alice" style={{ width: 20, marginRight: 8 }} />
  Alice
</Option>

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

  • autoFocus – автоматически фокусирует компонент при рендере.
  • notFoundContent – сообщение при отсутствии подходящих вариантов.
  • placement – позиционирование выпадающего списка (topLeft, bottomRight и др.).
  • split – символ, который используется для разделения текста при вставке упоминаний.

Пример с кастомизацией notFoundContent:

<Mentions notFoundContent="Нет совпадений" style={{ width: '100%' }}>
  <Option value="Alice">Alice</Option>
</Mentions>

Советы по использованию

  • Для больших списков пользователей рекомендуется комбинировать onSearch с ленивой загрузкой опций, чтобы не рендерить весь список сразу.
  • Можно использовать контролируемый режим для интеграции с Form.Item в Ant Design Forms.
  • При использовании нескольких префиксов следует внимательно проверять логику фильтрации, чтобы не возникало конфликтов при вводе.

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

Оглавление