Моя проблема в форме заявки, которую я составляю, где нужно заполнить много данных. Я генерирую HTML с помощью Hyperscript и сталкиваюсь с проблемой, когда при создании дополнительных элементов на странице я теряю информацию из входных данных, но только в том случае, когда я удаляю некоторые HTML, расположенные перед входом, и обновляю сеть. В примере у меня есть проблема исходного типа, когда я генерировал предупреждение (предлагая заполнить информацию) перед вводом, когда пользователь предоставляет информацию, но как только HTML генерируется снова без предупреждения, ввод также теряется. Вы знаете, как сохранить ввод и сгенерировать новый HTML без перемещения предупреждения? Вы можете лучше понять проблему, посмотрев пример - вы заполняете ввод, как предлагает предупреждение, а затем щелкаете, чтобы сгенерировать дополнительный HTML, но он удаляет ввод, и вам нужно заполнить его снова.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
</div>
<!-- Peryl import -->
<script src="https://unpkg.com/peryl@1.4.22/incremental-dom/dist/umd/incremental-dom.js"></script>
<script src="https://unpkg.com/peryl@1.4.22/dist/umd/hsml-h.js"></script>
<script src="https://unpkg.com/peryl@1.4.22/dist/umd/hsml-app.js"></script>
<!-- end Peryl import -->
<script>
const state = {
warning: "Please fill Temperature parameter",
showDiv: false
}
function getWarning() {
if (state.warning !== "") {
return h("div#warning", {style:"color: red;"}, state.warning);
}
}
function getDiv() {
if (state.div) {
return h("div", "The div is visible but input is gone");
}
}
function view() {
return [
getWarning(),
h("label", "Temperature"),
h("input", {type:"text"}),
h("button", {
on:["click", "showDiv"]
}, "showDiv"),
getDiv()
];
}
function dispatcher(app, action) {
if (action.type === "showDiv") {
state.warning = ""; // warning get's cleaned when it's filled
state.div = !state.div;
}
app.update();
}
new HApp(state, view, dispatcher)
.mount(document.getElementById("app"));
</script>
</body>
</html>