试剂输入未更新

Question

我正在尝试使用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？

- kamituel

Answer 1

我很容易就做到这一点 - "component"函数可以返回一个函数，该函数返回模板而不是模板本身。这样外部函数只会执行一次（我们可以在那里放置 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)))}]])))

- kamituel

---

直到我将 :value 改成 :defaultValue，这个解决方案才对我起作用。 - Kurt Mueller