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

Метод 1: использование AJAX с API-интерфейсом выборки
Один популярный способ отправить форму без перенаправления в React — использовать AJAX (асинхронный JavaScript и XML) с API-интерфейсом выборки. Этот метод позволяет отправить асинхронный запрос на сервер и обработать ответ без перезагрузки страницы. Вот пример того, как это можно сделать:

import React, { useState } from 'react';
function Form() {
  const [formData, setFormData] = useState({});
  const handleSubmit = async (event) => {
    event.preventDefault();

    const response = await fetch('/api/submitForm', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    // Handle the response as needed
    const data = await response.json();
    console.log(data);
  };
  const handleChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" onChange={handleChange} />
      <input type="email" name="email" onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}
export default Form;

Метод 2: использование React Hooks
React Hooks предоставляют элегантный способ управления состоянием и выполнения побочных эффектов в функциональных компонентах. Вы можете использовать хук useEffectдля обработки отправки формы без перенаправления. Вот пример:

import React, { useState, useEffect } from 'react';
function Form() {
  const [formData, setFormData] = useState({});
  useEffect(() => {
    if (Object.keys(formData).length > 0) {
      submitForm();
    }
  }, [formData]);
  const handleSubmit = (event) => {
    event.preventDefault();
    setFormData({
      name: event.target.name.value,
      email: event.target.email.value,
    });
  };
  const submitForm = async () => {
    const response = await fetch('/api/submitForm', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    // Handle the response as needed
    const data = await response.json();
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}
export default Form;

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