ClojureScript/Reagent中的绑定on-change

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

1. .-value 和 .-target 分别是什么意思？
2. 在哪里可以找到关于 .-value 和 .-target 的文档？
3. 为什么选择更复杂的语义？

- Teodor

Answer 1

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

在这里，你处于JavaScript互操作的世界，因此你需要查看JavaScript文档。

至于使用->宏或不使用的复杂语义：对于那些喜欢从左到右逐层解析属性的人来说，这只是方便的。->宏将使你的代码与等效的JavaScript代码类似。

- Chris Murphy

---

啊，这就是为什么我在搜索ClojureScript文档时没有找到任何东西的原因。有没有推荐的JavaScript文档来源？我找到了Mozilla和W3Schools的文档，但我缺少代码示例。正如你可能已经猜到的那样，我不是一个网页开发者！ - Teodor

我开始使用Github上的ClojureScript代码，然后在遇到特定的JavaScript问题时使用Google进行搜索。如果你无法通过这种方式解决问题，那么可以在ClojureScript的Slack组或者这里的SO上提问。但是要注意的是CSS可能会让人有些紧张！ - Chris Murphy