Как запретить гиперкрипту перезаписывать мои входные данные? Перил

Моя проблема в форме заявки, которую я составляю, где нужно заполнить много данных. Я создаю 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>
Источник

1 ответ

Описанная проблема связана с рендерингом узлов DOM с помощью механизма инкрементного домена в рамках HSML.

Это аналогичная проблема, как и в списках рендеринга (например, в виртуальном доме в React), в которых рекомендуется отмечать узлы списка с помощью чтобы помочь движку рендеринга управлять переупорядочением узлов.

Ниже приведен список узлов DOM. узел в примере. Один из узлов списка является входным элементом. Движок IDOM не может распознать переупорядочивание узлов, поэтому движок отображает все новые узлы и отбрасывает старые, когда вы перемешиваете элементы. Таким образом, ввод со своим значением удаляется и заменяется новым, содержащим пустое значение.

Чтобы решить проблему, вы должны пометить элемент ввода с помощью атрибут, помогающий механизму рендеринга идентифицировать узел во время перетасовки узлов, например:

      h("input", { _key: "some-input-key", type: "text" }).
Источник
Другие вопросы по тегам