0

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!変更ハンドラー呼び出しをプラグインするとイベントが飲み込まれるのはなぜですか?

4

1 に答える 1

1

はい、必要です。状態が変化するたびに、DOM は入力値を再レンダリングしてクリアします。したがって、 の属性に no がない場合は:value、:inputクリアされます。

この理由は、React.js が実際の DOM と仮想 DOM の差分を取り始めると、value仮想 DOM には何もないのに、実際の属性にいくつかあることがわかり、それがあなたのものであると仮定してそれをクリアするためです。欲しいです。DOM がどのように見えるべきかについて常に明示する必要があります (例: 2 番目のスニペット)。

于 2015-09-15T10:00:08.640 に答える