在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代碼。