В мире современной веб-разработки формы играют решающую роль в сборе данных, вводимых пользователем. React в сочетании с TypeScript предоставляет мощную и типобезопасную среду для создания интерактивных форм. В этой статье мы рассмотрим различные методы обработки отправки форм в React с использованием TypeScript, а также приведем практические примеры кода. Итак, приступим!

1. Использование обработчика событий onSubmit.
   Одним из распространенных подходов к обработке отправки форм в React является использование обработчика событий onSubmit. Прикрепив этот обработчик к атрибуту onSubmit формы, мы можем определить функцию обратного вызова, которая срабатывает при отправке формы. Вот пример:

import React from 'react';
const MyForm: React.FC = () => {
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // Perform form submission logic here
  };
  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Submit</button>
    </form>
  );
};

1. Использование перехватчика useRef:
   Другой метод предполагает использование перехватчика useRef, предоставляемого React. Этот хук позволяет нам создавать изменяемую ссылку, которая сохраняется при повторных рендерингах. Получив доступ к элементу DOM формы через перехватчик useRef, мы можем программно отправить форму. Вот пример:

import React, { useRef } from 'react';
const MyForm: React.FC = () => {
  const formRef = useRef<HTMLFormElement>(null);
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // Perform form submission logic here
  };
  const handleManualSubmit = () => {
    if (formRef.current) {
      formRef.current.submit();
    }
  };
  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="button" onClick={handleManualSubmit}>
        Submit
      </button>
    </form>
  );
};

1. Использование внешних библиотек форм.
   Экосистема React предлагает несколько мощных библиотек форм, таких как Formik и React Hook Form, которые упрощают задачи обработки форм. Эти библиотеки предоставляют встроенные функции handleSubmit и дополнительные функции, такие как проверка формы, проверка на уровне полей и управление состоянием формы. Вот пример использования Formik:

import React from 'react';
import { Formik, Form, Field } from 'formik';
const MyForm: React.FC = () => {
  const handleSubmit = (values: any) => {
    // Perform form submission logic here
  };
  return (
    <Formik initialValues={{}} onSubmit={handleSubmit}>
      <Form>
        {/* Form fields */}
        <Field type="text" name="name" />
        <Field type="email" name="email" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

В этой статье мы рассмотрели различные методы обработки отправки форм в React с использованием TypeScript. Мы рассмотрели традиционный обработчик событий onSubmit, используя хук useRef для отправки вручную и внешние библиотеки форм, такие как Formik. Понимая эти методы, вы будете хорошо подготовлены к решению различных сценариев обработки форм в ваших приложениях React. Приятного кодирования!