10

Reagent/React を使用して Hello World アプリを構築しようとしています。:value/:on-changeコンボを使用して入力をアトムに結び付けます。ただし、入力すると、入力は空のままです。

(defn new-user []
  ; Atom declared in an inner `let`.
  (let [v (atom "")]
    [:div
     [:input {:type "text"
              :value @v
              :on-change (fn [evt]
                           (reset! v (-> evt .-target .-value)))
              }]]))

(defn app [state]
  [:div
   [:p "State" (pr-str @app-state)]
   [new-user]])

(r/render-component [app app-state]
                    (.-body js/document))

アトムを の外に移動すると、次のletように機能します。

; Atom is now top-level.
(defonce v (atom ""))

(defn new-user []
  [:div
   [:input {:type "text"
            :value @v
            :on-change (fn [evt]
                         (reset! v (-> evt .-target .-value)))
            }]])

vReact が再レンダリングするたびに が再宣言されるためですか? もしそうなら、グローバル変数を使用して保持する必要がないように、そのコードをリファクタリングするにはどうすればよいvですか?

4

1 に答える 1