Чтобы отправить форму React без перенаправления пользователя, вы можете использовать различные методы. Вот несколько подходов, которые вы можете рассмотреть:
- Использование метода
preventDefault(). В функции обработчика отправки формы вы можете вызвать методpreventDefault()для объекта события, чтобы предотвратить использование метода по умолчанию. поведение отправки формы, которое обычно вызывает перезагрузку или перенаправление страницы. Затем вы можете обрабатывать отправку данных формы асинхронно, используя такие методы, как AJAX или выборка.
function handleSubmit(event) {
event.preventDefault();
// Handle form data submission asynchronously
// using AJAX, fetch, or any preferred method
}
- Использование библиотеки
axios. Axios — это популярная библиотека JavaScript, которая позволяет выполнять HTTP-запросы. Вы можете использовать его для отправки POST-запроса на ваш сервер без перезагрузки страницы.
import axios from 'axios';
function handleSubmit(event) {
event.preventDefault();
// Get form data
const formData = new FormData(event.target);
// Send POST request using axios
axios.post('/your/api/endpoint', formData)
.then(response => {
// Handle response
})
.catch(error => {
// Handle error
});
}
- Использование API
fetch. APIfetchпозволяет выполнять асинхронные запросы. Вы можете использовать его для отправки запроса POST на ваш сервер и обработки ответа.
function handleSubmit(event) {
event.preventDefault();
// Get form data
const formData = new FormData(event.target);
// Send POST request using fetch
fetch('/your/api/endpoint', {
method: 'POST',
body: formData
})
.then(response => {
// Handle response
})
.catch(error => {
// Handle error
});
}
Это всего лишь несколько примеров того, как можно отправить форму React без перенаправления. Не забудьте настроить код в соответствии с вашими конкретными требованиями и реализацией на стороне сервера.