如何使用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的外观（例如，您的第二个片段）。