onchange - 在 ClojureScript/Reagent 中绑定(bind)更改

Question

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

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

(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))))

1. .-value 和 .-target 有什么作用？
2. 在哪里可以找到 .-value 和 .-target 的文档？
3. 为什么选择更复杂的语义？

Answer 1

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

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

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