试剂输入未更新
Reagent input not updating
我正在尝试使用 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)))
}]])
是不是因为React每次重新渲染都会重新声明v
?如果是这样,我该如何重构该代码,这样我就不必使用全局变量来保存 v
?
我原来很简单 - "component" 函数可以 return 不是模板,而是 return 函数模板。这样,外部函数将只执行一次(我们可以将 let
放在那里),内部函数将在每次重新渲染时执行:
(defn new-user []
(let [v (atom "")]
; The returned function will be called on every re-render.
(fn []
[:div
[:input {:type "text"
:value @v
:on-change (fn [evt]
(reset! v (-> evt .-target .-value)))}]])))
我正在尝试使用 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)))
}]])
是不是因为React每次重新渲染都会重新声明v
?如果是这样,我该如何重构该代码,这样我就不必使用全局变量来保存 v
?
我原来很简单 - "component" 函数可以 return 不是模板,而是 return 函数模板。这样,外部函数将只执行一次(我们可以将 let
放在那里),内部函数将在每次重新渲染时执行:
(defn new-user []
(let [v (atom "")]
; The returned function will be called on every re-render.
(fn []
[:div
[:input {:type "text"
:value @v
:on-change (fn [evt]
(reset! v (-> evt .-target .-value)))}]])))