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

Метод 1: использование элемента HTML-формы

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

Метод 2: использование React Hook (useCallback)

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

Метод 3: использование компонента класса

import React from 'react';
class MyForm extends React.Component {
  handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    // Handle form submission logic here
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Метод 4. Использование сторонних библиотек (например, Formik)

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

В этой статье мы рассмотрели несколько методов обработки события onSubmit в приложении React TypeScript. Мы обсудили использование элемента формы HTML, React Hooks (useCallback), компонентов классов и сторонних библиотек, таких как Formik. Каждый метод имеет свои преимущества и может подходить для разных сценариев. Используя эти методы, вы можете эффективно обрабатывать отправку форм в своих проектах React TypeScript.