Формы — неотъемлемая часть любого веб-приложения, позволяющая пользователям вводить и отправлять данные. Ant Design (antd) — популярная библиотека пользовательского интерфейса для React, предоставляющая набор настраиваемых и готовых к использованию компонентов, включая компоненты форм. В этой статье мы рассмотрим различные методы onSubmit, доступные в antd для обработки отправки форм. Мы предоставим примеры кода и обсудим детали их реализации.

Метод 1: использование свойства onFinish
Компонент Formв antd предоставляет свойство onFinish, которое можно использовать для обработки отправки форм. Этот метод срабатывает, когда форма успешно проверена и все поля формы соответствуют правилам проверки. Вот пример:

import { Form, Button } from 'antd';
const MyForm = () => {
  const onFinish = (values) => {
    console.log('Form values:', values);
    // Perform form submission logic here
  };
  return (
    <Form onFinish={onFinish}>
      {/* Form fields */}
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};

Метод 2: использование реквизита onSubmit
В дополнение к onFinishкомпонент Formтакже предоставляет реквизит onSubmit. Этот метод срабатывает при отправке формы, независимо от статуса проверки. Вы можете использовать его для выполнения пользовательской логики проверки или отправки. Вот пример:

import { Form, Button } from 'antd';
const MyForm = () => {
  const onSubmit = (event) => {
    event.preventDefault();
    // Perform custom validation or submission logic
    // Access form values using event.target.elements
  };
  return (
    <Form onSubmit={onSubmit}>
      {/* Form fields */}
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};

Метод 3: использование хука useForm
antd также предоставляет хук useForm, который позволяет получить доступ к методам формы и экземпляру формы. Вы можете использовать этот крючок для определения собственного метода onFinish. Вот пример:

import { Form, Button, useForm } from 'antd';
const MyForm = () => {
  const [form] = useForm();
  const onFinish = (values) => {
    console.log('Form values:', values);
    // Perform form submission logic here
  };
  return (
    <Form form={form} onFinish={onFinish}>
      {/* Form fields */}
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};

В этой статье мы рассмотрели различные методы обработки отправки форм в antd. Мы рассмотрели реквизиты onFinishи onSubmit, предоставляемые компонентом Form, а также хук useForm. Используя эти методы, вы можете эффективно обрабатывать отправку форм и реализовывать собственную логику в соответствии с вашими конкретными требованиями.