在 ClojureScript/Reagent 中绑定更改

Question

我想了解输入字段在 Reagent 中的工作原理。

我首先尝试将 on-change 绑定到一个更改底层原子的简单函数：

(defonce app-state
  (reagent/atom "Teodor"))

(defn page [ratom]
  [:div
    [:p
      "Please enter your name: "
      [:input {:on-change #(swap! ratom %)
               :value @ratom}]]
    [:p "Your name is " @ratom]])

... 没有用。然而，这确实：

(defonce app-state
  (reagent/atom "Teodor"))

(defn page [ratom]
  [:div
    [:p
      "Please enter your name: "
      [:input {;:on-change #(swap! ratom %)
               :on-change (fn [evt]
                             (reset! ratom (-> evt .-target .-value)))
               :value @ratom}]]
    [:p "Your name is " @ratom]])

我已经成功地对 -> 宏进行了脱糖处理：

(fn [evt]
  (reset! ratom (-> evt .-target .-value)))
;; is the same as
(fn [evt]
  (reset!
    ratom
    (.-value (.-target evt))))

.-value 和 .-target 是做什么的？
在哪里可以找到 .-value 和 .-target 的文档？
为什么选择更复杂的语义？

Answer 1

进入您的函数的 evt 是一个 JavaScript 事件对象。 .-target 和 .-value 是 JavaScript DOM 属性，允许您访问事件持有的基础值。

这里是 JavaScript 互操作的世界，因此您必须前往 JavaScript 获取文档。

至于是否使用 -> 宏的复杂语义：这对于喜欢在阅读时从左到右剥离属性的人来说非常方便。 -> 宏将使您的代码看起来类似于等效的 JavaScript 代码。

在 ClojureScript/Reagent 中绑定更改

Binding on-change in ClojureScript/Reagent

onchange

clojurescript

dplyr

reagent