我的問題出在我制作的申請表中，需要填寫大量輸入。我正在使用 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/[email protected]/incremental-dom/dist/umd/incremental-dom.js"></script> <script src="https://unpkg.com/[email protected]/dist/umd/hsml-h.js"></script> <script src="https://unpkg.com/[email protected]/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>
如何阻止超標覆蓋我的輸入？珀麗爾
炎炎設計
2022-12-18 16:05:10
