我的問(wèn)題出在我制作的申請(qǐng)表中，需要填寫(xiě)大量輸入。我正在使用 Hyperscript 生成 HTML，我遇到了一個(gè)問(wèn)題，當(dāng)我在頁(yè)面中生成更多元素時(shí)，我丟失了來(lái)自輸入的信息，但只有在我刪除位于輸入之前的一些 HTML 并更新網(wǎng)絡(luò)時(shí)才會(huì)出現(xiàn)這種情況。在示例中，我遇到了原始類(lèi)型的問(wèn)題，我在用戶(hù)提供信息的輸入之前生成了警告（說(shuō)要填寫(xiě)信息），但是一旦再次生成 HTML 而沒(méi)有警告，輸入也會(huì)丟失。您知道如何在不移動(dòng)警告的情況下保留輸入并生成新的 HTML 嗎？您可以通過(guò)查看示例更好地理解問(wèn)題 - 您按照警告建議填寫(xiě)輸入，然后單擊以生成其他 HTML，但它會(huì)刪除輸入，您必須再次填寫(xiě)。<!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>
如何阻止超標(biāo)覆蓋我的輸入？珀麗爾
炎炎設(shè)計(jì)
2022-12-18 16:05:10
