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