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

В Ant Design (AntD) обработка событий тесно связана с особенностями React, поскольку библиотека построена поверх него. Компоненты AntD поддерживают все стандартные события React, такие как onClick, onChange, onFocus, onBlur, а также собственные специфические события, характерные для конкретных компонентов.

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

События форм

Input, InputNumber, TextArea

Для текстовых полей и числовых инпутов основными событиями являются:

  • onChange — срабатывает при каждом изменении значения компонента.
  • onFocus и onBlur — позволяют отслеживать момент фокуса и потери фокуса.
  • onPressEnter — срабатывает при нажатии клавиши Enter.

Пример:

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

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

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handlePressEnter = () => {
    console.log('Enter pressed, value:', value);
  };

  return (
    <Input
      value={value}
      onCha nge={handleChange}
      onPressEn ter={handlePressEnter}
      placeholder="Введите текст"
    />
  );
}

Здесь важно различать событие React onChange и нативное change. В AntD onChange передает уже актуальное значение компонента, упрощая управление состоянием.

Sel ect и автозаполняемые компоненты

Компоненты Select и AutoComplete имеют ряд специфических событий:

  • onSelect(value, option) — вызывается при выборе значения.
  • onDeselect(value) — срабатывает при удалении выбранного элемента (для множественного выбора).
  • onSearch(value) — позволяет отслеживать ввод пользователя для фильтрации опций.

Пример для Select:

import { Sel ect } fr om 'antd';

const { Option } = Select;

function DemoSelect() {
  const handleSelect = (value) => {
    console.log('Selected:', value);
  };

  return (
    <Sel ect onSel ect={handleSelect} style={{ width: 200 }}>
      <Option value="apple">Apple</Option>
      <Option value="orange">Orange</Option>
    </Select>
  );
}

Кнопки и интерактивные элементы

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

  • onClick — основной обработчик.
  • onMouseEnter, onMouseLeave — для создания интерактивных эффектов наведения.
  • onFocus и onBlur — для управления стилями при фокусе.

Особенность AntD заключается в том, что Button также может быть контролируемым через проп loading, и событие onClick может работать асинхронно:

import { Button } fr om 'antd';
import { useState } fr om 'react';

function DemoButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return <Button loading={loading} onCl ick={handleClick}>Загрузить</Button>;
}

Модальные окна и уведомления

Модальные окна в AntD предоставляют специальные события:

  • onOk — вызывается при нажатии кнопки подтверждения.
  • onCancel — при закрытии модального окна или нажатии кнопки отмены.

Пример:

import { Modal, Button } fr om 'antd';
import { useState } from 'react';

function DemoModal() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onCl ick={() => setVisible(true)}>Открыть</Button>
      <Modal
        visible={visible}
        onOk={() => setVisible(false)}
        onCan cel={() => setVisible(false)}
      >
        Содержимое модального окна
      </Modal>
    </>
  );
}

Notification и Message

Компоненты уведомлений используют функции API, а не пропсы, для обработки событий:

  • notification.open({ onClick }) — срабатывает при клике на уведомление.
  • message.success('Успешно', 3, onClose) — onClose вызывается после автоматического закрытия.

Таблицы и сложные компоненты

Table

Компонент Table предоставляет множество событий для работы с данными:

  • onChange(pagination, filters, sorter, extra) — основной обработчик для сортировки, фильтрации и пагинации.
  • onRow — функция, возвращающая объект событий для строки:
<Table
  columns={columns}
  dataSource={data}
  onCha nge={(pagination, filters, sorter) => {
    console.log('Table changed:', pagination, filters, sorter);
  }}
  on Row={(record) => ({
    onClick: () => console.log('Row clicked:', record),
    onDoubleClick: () => console.log('Row double-clicked:', record)
  })}
/>

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

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

  1. Использовать контролируемые компоненты для надежного управления состоянием.
  2. Разделять события на стандартные React и специфичные AntD. Это важно, чтобы не потерять доступ к уникальным возможностям компонентов.
  3. Асинхронная обработка — многие действия (загрузка данных, подтверждение модальных окон) требуют корректного управления состоянием loading или visible.
  4. События строк и элементов коллекций (Table, List) возвращают функции для каждой строки или элемента, что позволяет детально отслеживать действия пользователя.
  5. Передача параметров событий — всегда проверять, какие аргументы передает обработчик. Например, onChange для Select возвращает значение и объект опции, а для Input — событие события.

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

Компонент Form объединяет обработку событий с валидацией:

  • onFinish(values) — вызывается после успешной валидации.
  • onFinishFailed(errorInfo) — при ошибках валидации.
  • onValuesChange(changedValues, allValues) — срабатывает при любом изменении поля формы.

Пример:

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

function DemoForm() {
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      onFin ish={(values) => console.log('Submitted:', values)}
      onValuesCha nge={(changed, all) => console.log('Changed:', changed, 'All:', all)}
    >
      <Form.Item name="username" rules={[{ required: true, message: 'Введите имя пользователя' }]}>
        <Input placeholder="Имя пользователя" />
      </Form.Item>
      <Form.Item>
        <Button htmlType="submit">Отправить</Button>
      </Form.Item>
    </Form>
  );
}

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

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

Оглавление