Electric Clojure - 如何将新值添加到表中？ （如表格格式）

Question

我开始学习 Electric Clojure 并开始制作一些教育项目（非常简单，因为不幸的是没有关于前端开发方面、dom 元素和实现等的详细文档，更重要的是我没有前端开发经验） 当用户输入新值时我需要一些帮助，我希望在表中看到该值。

(e/defn TableApp []
  (e/client
    (let [!userName (atom "")
          !email (atom "")]
      (dom/input (dom/props {:placeholder "Please write your username..."})
        (dom/on "keydown"
          (e/fn [enter]
            (when (= "Enter" (.-key enter))
              (when-some [givenValue (contrib.str/empty->nil (-> enter .-target .-value))]
                (reset! !userName givenValue)
                (set! (.-value dom/node)
                  (dom/props {:placeholder (str "Given Username= " givenValue)})))))))
      (dom/input (dom/props {:placeholder "Please write your email..."})
        (dom/on "keydown"
          (e/fn [enter]
            (when (= "Enter" (.-key enter))
              (when-some [givenValue (contrib.str/empty->nil (-> enter .-target .-value))]
                (reset! !email givenValue)
                (set! (.-value dom/node)
                  (dom/props {:placeholder (str "Given email= " givenValue)})))))))

      (dom/table (dom/props {:class "hyperfiddle"})
        (e/client
          (dom/tr (dom/td (dom/text (str "Username: " (e/watch !userName)))))
          (dom/tr (dom/td (dom/text (str "Email: " (e/watch !email))))))))))

当我输入一个值时，我可以在表中看到该值，正如您在此处看到的那样。

在这里，当我输入一个值覆盖我的旧变量时（我知道我是这样写代码的，因为我不知道如何做到这一点，因为我在这里寻求帮助。（就像以表格格式一样））

最好的方法是什么？ （如果可能的话，我想用提交按钮而不是输入来控制值输入，这对我未来的研究来说将是一个很好的例子） 非常感谢！

Answer 1

(e/defn TableApp []
  (e/client
    (let [*userNamePlaceHolder (atom "Please write your username...")
          userNamePlaceHolder (e/watch *userNamePlaceHolder)]
      (dom/input (dom/props {:placeholder userNamePlaceHolder})
        (dom/on "keydown"
          (e/fn [enter]
            (when (= "Enter" (.-key enter))
              (when-some [givenValue (contrib.str/empty->nil (-> enter .-target .-value))]
                (reset! *userNamePlaceHolder (str "Given Username= " givenValue))
                (reset! !userName givenValue)
                (set! (.-value dom/node) "")