我的问题出在我制作的申请表中，需要填写大量输入。我正在使用 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>
1 回答
FFIVE
TA贡献1797条经验 获得超6个赞
所描述的问题是通过 HSML 下的增量 dom 引擎渲染 DOM 节点给出的。
这与渲染列表（例如 React 中的虚拟 dom）中的问题类似，其中最好的做法是通过标记列表节点key来帮助渲染引擎管理节点重新排序。
div#app示例中的节点下有一个 DOM 节点列表。列表节点之一是输入元素。IDOM 引擎无法识别节点重新排序，因此引擎会在您打乱元素时呈现所有新节点并丢弃旧节点。因此输入及其值被删除并替换为包含空值的新输入。
要解决问题，您必须使用_key属性标记输入元素以帮助渲染引擎在节点随机播放期间识别节点，如下所示：
h("input", { _key: "some-input-key", type: "text" }).添加回答
举报
0/150
提交
取消