#reactjs #react-hooks #antd
#reactjs #реагирующие крючки #антд
Вопрос:
Я хотел бы показать всплывающее окно при восстановлении данных или обновлении страницы в reactjs с помощью hook
- открыть страницу, не показывать всплывающее окно
- заполните форму, не отправляйте, только заполняйте поля
- закрыть страницу или перезагрузить страницу
- снова откройте страницу
- показать всплывающее окно хотите восстановить данные
- данные восстанавливаются
Как я могу их приготовить ? Спасибо
Ответ №1:
Вы можете поместить свое состояние в виде строки JSON в localstorage при событии beforeunload.
import React from "react";
const saveState = (state) => {
localStorage.setItem("yourKey", JSON.stringify({
time: Date.now(),
data: state
})
);
};
const loadState = () => {
const str = localStorage.getItem("yourKey");
if (str == null) return null;
const obj = JSON.parse(str);
if (obj.time > Date.now() 60000) //Date.now() returns time in miliseconds
return null; //stored data is too old
return obj.data;
};
export default function App() {
const [data, setData] = React.useState(loadState() || {
name: "",
another: ""
}
);
const handleData = React.useCallback(() => {
saveState(data);
}, [data]);
React.useEffect(() => {
window.addEventListener("beforeunload", handleData, false);
return () => window.removeEventListener("beforeunload", handleData);
}, [handleData]);
return (
<div>
Name
<input
value={data.name}
onChange={(e) => setData((p) => ({ ...p, name: e.target.value }))}
/>
Another
<input
value={data.another}
onChange={(e) => setData((p) => ({ ...p, another: e.target.value }))}
/>
</div>
);
}
Ответ №2:
Вы должны где-то сохранить данные, например, в локальном хранилище: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Данные в состояниях реакции не сохраняются при перезагрузке или закрытии страницы.