gpt4 book ai didi

reactjs - 试剂输入未更新

转载 作者:行者123 更新时间:2023-12-03 13:22:29 26 4
gpt4 key购买 nike

我正在尝试使用 Reagent/React 构建一个 Hello World 应用程序。我使用 :value/:on-change 组合将输入与原子绑定(bind)。但是,当我键入时,输入仍然为空:

(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

最佳答案

事实证明这非常简单 - “组件”函数可以返回的不是模板,而是返回模板的函数。这样,外部函数将只执行一次(我们可以将 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)))}]])))

关于reactjs - 试剂输入未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28645103/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com