我的问题出在我制作的申请表中，需要填写大量输入。我正在使用 Hyperscript 生成 HTML，我遇到了一个问题，当我在页面中生成更多元素时，我丢失了来自输入的信息，但只有在我删除位于输入之前的一些 HTML 并更新网络时才会出现这种情况。在示例中，我遇到了原始类型的问题，我在用户提供信息的输入之前生成了警告（说要填写信息），但是一旦再次生成 HTML 而没有警告，输入也会丢失。您知道如何在不移动警告的情况下保留输入并生成新的 HTML 吗？您可以通过查看示例更好地理解问题 - 您按照警告建议填写输入，然后单击以生成其他 HTML，但它会删除输入，您必须再次填写。
<!DOCTYPE html>
<html 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>
FFIVE
相关分类