如何使用React/Om在輸入onChange中傳播文本

Question

作爲React/Om的新手，我不確定這個問題是否是Om特有的。

我想建立一個基於自由文本輸入的日期條目組件。它包括他們可以鍵入的<input>字段，以及顯示解析日期（如果有效）的<p>。

我實現它：

(defn parse-date [e owner] 
    (let [text (.. e -target -value)] 
    (om/set-state! owner :parsed-date text))) 

(defn date-entry [app owner] 
    (reify 
    om/IInitState 
    (init-state [_] {:parsed-date ""}) 
    om/IRenderState 
    (render-state [this state] 
     (dom/div nil 
       (dom/input #js {:type "text" 
           :ref "date" 
           :id "new-date" 
           :onChange #(parse-date % owner)}) 
       (dom/p  nil (:parsed-date state)))))) 

不幸的是，我只要一插上這種變化的處理程序，如預期它不表現。當我在輸入字段中輸入一個數字時，我可以看到它出現在輸入框和它旁邊的<p>中，但是它立即從輸入中消失。

我能夠通過將文本狀態各地的工作吧：

(defn parse-date [e owner] 
    (let [text (.. e -target -value)] 
    (om/set-state! owner :parsed-date text) 
    (om/set-state! owner :text text))) 

(defn date-entry [app owner] 
    (reify 
    om/IInitState 
    (init-state [_] {:parsed-date "" :text ""}) 
    om/IRenderState 
    (render-state [this state] 
     (dom/div nil 
       (dom/input #js {:type "text" 
           :ref "date" 
           :id "new-date" 
           :onChange #(parse-date % owner) 
           :value (:text state)}) 
       (dom/p  nil (:parsed-date state)))))) 

不過，我很驚訝，我不得不這樣做。它真的有必要嗎？有人可以解釋一下這裏發生了什麼，或者指向相關文檔嗎？爲什麼插入一個呼叫set-state!的變更處理程序會吞噬事件？

Answer 1

是的，這是必要的。每次狀態改變時，DOM都會重新渲染並清除輸入的值。因此，如果您的:input的屬性中沒有:value，它將被清除。

原因是，當React.js開始區分真實DOM和虛擬DOM時，它發現真實屬性中有一些value，而虛擬DOM中沒有一個，因此它清除它，假設這就是你想要的。您應該始終明確DOM的外觀（例如，您的第二個片段）。