Методы и события

Библиотека Ant Design предоставляет богатый набор компонентов пользовательского интерфейса для приложений на JavaScript и React. Помимо визуальных свойств и параметров конфигурации, каждый компонент обладает системой методов и событий, позволяющих управлять поведением интерфейса программно и реагировать на действия пользователя.

Методы позволяют вызывать определённые действия компонента из кода, тогда как события предназначены для обработки пользовательских взаимодействий — кликов, изменений значений, фокусировки, отправки форм и других операций.

Общая концепция событий в Ant Design

Компоненты библиотеки построены на архитектуре React, поэтому большинство событий реализованы через передачу функций-обработчиков в свойства компонента.

Событие в Ant Design представляет собой callback-функцию, которая вызывается при наступлении определённого действия. Обычно такие свойства имеют префикс on.

Примеры распространённых событий:

Событие Назначение
onClick реакция на нажатие
onChange изменение значения
onSubmit отправка формы
onSelect выбор элемента
onOpenChange изменение состояния открытия

Общий принцип работы:

<Button onCl ick={handleClick}>Нажать</Button>

В данном примере обработчик handleClick будет вызван при клике по кнопке.

Методы компонентов

Некоторые компоненты Ant Design предоставляют публичные методы, которые можно вызывать напрямую через ссылку (ref). Это позволяет управлять состоянием компонента из логики приложения.

Типичные задачи, решаемые методами:

  • программное открытие или закрытие элемента
  • управление фокусом
  • очистка данных
  • запуск встроенных операций компонента

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

import { Input } from 'antd';
import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <Input ref={inputRef} />
      <button onCl ick={focusInput}>Фокус</button>
    </>
  );
}

В данном случае вызывается метод focus() компонента Input.

События кнопок

Компонент Button относится к базовым интерактивным элементам. Основным событием является onClick.

onClick

Срабатывает при нажатии кнопки.

import { Button } from 'antd';

function Example() {
  const handleClick = () => {
    console.log('Кнопка нажата');
  };

  return (
    <Button type="primary" onCl ick={handleClick}>
      Отправить
    </Button>
  );
}

Аргумент функции содержит объект события браузера.

События компонентов ввода

Компоненты ввода являются основой большинства интерфейсов. В Ant Design они представлены элементами Input, Select, Checkbox, Radio и другими.

Событие onChange

Наиболее распространённое событие для компонентов ввода.

import { Input } from 'antd';

function Example() {
  const handleChange = (e) => {
    console.log(e.target.value);
  };

  return <Input onCha nge={handleChange} />;
}

Особенности:

  • вызывается при каждом изменении значения
  • передаёт объект события
  • используется для синхронизации состояния

События фокуса

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

Событие Назначение
onFocus получение фокуса
onBlur потеря фокуса

Пример:

<Input
  onFo cus={() => console.log('Фокус')}
  onB lur={() => console.log('Потеря фокуса')}
/>

События компонента Select

Компонент Select используется для выбора значений из списка и обладает расширенным набором событий.

onSelect

Вызывается при выборе элемента.

<Select onSel ect={(value) => console.log(value)}>
  <Select.Option value="a">A</Select.Option>
  <Select.Option value="b">B</Select.Option>
</Select>

onChange

Вызывается после изменения выбранного значения.

<Select onCha nge={(value) => console.log(value)} />

Различие между событиями:

Событие Особенность
onSelect фиксирует момент выбора
onChange фиксирует итоговое изменение

onSearch

Используется при включённом поиске.

<Select
  showSearch
  onSea rch={(value) => console.log(value)}
/>

Применяется для реализации автодополнения и динамической загрузки данных.

События таблицы

Компонент Table является одним из наиболее сложных элементов библиотеки. Он поддерживает большое количество событий.

onChange

Основное событие таблицы.

<Table
  columns={columns}
  dataSource={data}
  onCha nge={(pagination, filters, sorter) => {
    console.log(pagination, filters, sorter);
  }}
/>

Параметры:

Параметр Назначение
pagination информация о пагинации
filters активные фильтры
sorter параметры сортировки

onRow

Позволяет назначить события для строк таблицы.

<Table
  on Row={(record) => ({
    onClick: () => console.log(record),
  })}
/>

Возможные события строки:

  • onClick
  • onDoubleClick
  • onContextMenu
  • onMouseEnter
  • onMouseLeave

События формы

Компонент Form используется для работы с пользовательскими данными.

onFinish

Вызывается при успешной отправке формы.

<Form onFin ish={(values) => console.log(values)}>
  <Form.Item name="username">
    <Input />
  </Form.Item>
</Form>

Особенности:

  • срабатывает после успешной валидации
  • получает объект значений формы

onFinishFailed

Срабатывает при ошибке валидации.

<Form
  onFinishFai led={(errorInfo) => {
    console.log(errorInfo);
  }}
>

Передаёт информацию об ошибках полей.

onValuesChange

Позволяет отслеживать изменения данных формы.

<Form
  onValuesCha nge={(changedValues, allValues) => {
    console.log(changedValues);
  }}
>

Используется для:

  • динамической валидации
  • изменения зависимых полей
  • сохранения промежуточных данных

Методы формы

Форма предоставляет программный API, позволяющий управлять её состоянием.

Создание экземпляра формы:

const [form] = Form.useForm();

setFieldsValue

Позволяет программно установить значения полей.

form.setFieldsValue({
  username: "admin"
});

getFieldsValue

Получает значения формы.

const values = form.getFieldsValue();

validateFields

Запускает проверку всех полей формы.

form.validateFields()
  .then(values => console.log(values))
  .catch(error => console.log(error));

resetFields

Сбрасывает форму к исходному состоянию.

form.resetFields();

События модальных окон

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

onOk

Срабатывает при подтверждении действия.

<Modal
  open={visible}
  onOk={() => console.log("Подтверждение")}
>

onCancel

Вызывается при закрытии окна.

<Modal
  onCan cel={() => setVisible(false)}
>

afterOpenChange

Позволяет отслеживать изменение состояния открытия.

<Modal
  afterOpenChange={(open) => console.log(open)}
>

События уведомлений

Компоненты notification и message поддерживают события завершения.

Пример:

message.success({
  content: "Сохранено",
  onClose: () => console.log("Закрыто")
});

Событие onClose вызывается после закрытия уведомления.

Асинхронные обработчики событий

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

const handleSubmit = async () => {
  const data = await fetch("/api/data");
};

Особенно часто такой подход используется:

  • при отправке форм
  • при загрузке данных
  • при подтверждении действий

Паттерны организации событий

При разработке крупных приложений на React с использованием Ant Design применяются устойчивые архитектурные подходы.

Централизованные обработчики

Все события выносятся в отдельные функции:

const handlers = {
  handleSave() {},
  handleDelete() {},
  handleEdit() {}
};

Использование кастомных хуков

function useFormHandlers(form) {
  const submit = () => form.submit();
  return { submit };
}

Делегирование логики сервисам

Интерфейсные события вызывают бизнес-логику из сервисных модулей.

const handleSave = async (values) => {
  await userService.save(values);
};

Такой подход позволяет разделить:

  • слой интерфейса
  • бизнес-логику
  • работу с API

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

Предотвращение лишних перерисовок

Функции-обработчики желательно мемоизировать.

const handleClick = useCallback(() => {
  console.log("click");
}, []);

Это снижает количество повторных рендеров компонентов.

Передача параметров в обработчик

<Button onCl ick={() => handleDelete(id)} />

Важно избегать сложной логики внутри JSX.

Контроль всплытия событий

Иногда требуется остановить распространение события.

const handleClick = (e) => {
  e.stopPropagation();
};

Это актуально для вложенных компонентов, например внутри таблиц и карточек.

Связь методов и событий

В большинстве компонентов Ant Design методы и события работают совместно:

  • событие фиксирует действие пользователя
  • метод изменяет состояние компонента

Типичная схема работы:

  1. пользователь выполняет действие
  2. срабатывает событие (onChange, onClick)
  3. обработчик обновляет состояние
  4. вызываются методы компонента

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

Оглавление