如何阻止超标覆盖我的输入？珀丽尔

Question

我的问题出在我制作的申请表中，需要填写大量输入。我正在使用 Hyperscript 生成 HTML 并且我运行遇到一个问题，当我在页面中生成更多元素时，我丢失了来自输入的信息，但只有在我删除一些位于之前的 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>

Answer 1

所描述的问题是通过 HSML 下的增量 dom 引擎渲染 DOM 个节点给出的。

这与渲染列表（例如 React 中的虚拟 dom）中的问题类似，其中最佳做法是通过 key 标记列表节点以帮助渲染引擎管理节点重新排序。

示例中div#app个节点下有DOM个节点的列表。列表节点之一是输入元素。 IDOM 引擎无法识别节点重新排序，因此当您打乱元素时，引擎会呈现所有新节点并丢弃旧节点。因此输入及其值被删除并替换为包含空值的新输入。

要解决问题，您必须使用 _key 属性标记输入元素，以帮助渲染引擎在节点随机播放期间识别节点，如下所示：

h("input", { _key: "some-input-key", type: "text" }).

如何阻止超标覆盖我的输入？珀丽尔

How to stop hyperscript from overwriting my inputs ? Peryl

javascript

input

typescript

hyperscript