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

我已经成功地desugar的->宏：

(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 interop的世界中，所以您将不得不前往JavaScript获取文档。

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