Я использую Sweetalert2 в компоненте реакции.
здесь код:
SaveChangesModal. js
import Swal from 'sweetalert2'
export default async function SaveChangesModal(message, callback) {
const result = await Swal.fire({
title: 'Save Changes!',
type: 'warning',
text: message,
showCancelButton: true,
cancelButtonText: 'No',
confirmButtonText: 'Yes',
allowOutsideClick: false,
showConfirmButton: true,
})
if (result.value) {
return callback(true)
}
return callback(true)
}
Открыть всплывающее окно Sweetalert в истории. js компонент
истории. js
import { createBrowserHistory } from 'history'
import SaveChangesModal from 'Common/SettingsForm/SaveChangesModal'
export default createBrowserHistory({
async getUserConfirmation(message, callback) {
return SaveChangesModal(message, callback)
},
})
, и это путь маршрута для возврата истории . js страница, когда changeMade имеет значение true в SettingsForm. js component .
SettingsForm. js
UNSAFE_componentWillMount() {
const { history } = this.props
this.unblock = history.block(this.routeChange)
}
// eslint-disable-next-line consistent-return
routeChange = () => {
const { changesMade } = this.props
if (changesMade)
return 'Would you like to save your changes before leaving?'
}
componentWillUnmount() {
this.unblock()
}
Эти компонент работает нормально, но проблема в том, как использовать submit в sweetalert2, открывается всплывающее окно, и я нажимаю кнопку «Сохранить», тогда это условие истинно
if (result.value) {
return callback(true)
}
и страница не сохраняет данные и переходит на другую вкладку ,
Примечание : структура открывается после открытия всплывающего окна, нажатия кнопки сохранения и сохранения данных и перехода на другую вкладку
это всплывающее окно sweetalert2 :
![enter image description here](https://i.stack.imgur.com/KOMJN.png)