简单的 Clojurescript 表单

Question

我正在使用 Reagent 和 CLJS，熟悉 React 和 Clojure，不太熟悉 CLJS。我想制作一个简单的表格，但在 CLJS 中对我来说并不明显。

(defn form []
  [:div
   [:input {:type "text" :name "first-name" :id "first-name"}]
    [:button  {:on-click (fn [e] (test-func "hello"))}
  "Click me!"]
])

我想获取该输入的值，并在单击按钮时将其传递给函数。如何将该输入的值输入到我的 on-click 函数中？

Answer 1

您可以像这样获取元素的值：(.-value (.getElementById js/document "first-name"))

(defn form []
  [:div
   [:input {:type "text" :name "first-name" :id "first-name"}]
    [:button  {:on-click (fn [e] (test-func (.-value (.getElementById js/document "first-name"))))}
  "Click me!"]
])

如果有更好的答案，请分享。 :)

Answer 2

惯用且技术上正确的方法是避免在 DOM 中保留任何状态并直接访问它。您不应该依赖输入的值。保持状态为 Reagent 的原子。然后你可以用它做任何事情。

(def first-name (r/atom ""))

(defn form []
  [:div
   [:input {:type "text"
            :value @first-name
            :on-change #(reset! first-name (.-value (.-target %)))
            }]
   [:button  {:on-click #(test-func @first-name)} "Click me!"]])

简单的 Clojurescript 表单

Simple Clojurescript form

clojure

hiccup

clojurescript

reagent