重新框架：输入：更改重置！不改变输入值

Question

我正在研究 re-frame 框架。

在下面的代码中，当用户输入以下内容时我无法更新输入值：

(defn measurement-input [{:keys [amount unit path]}]
  (let [amt (atom amount)]
    (fn []
      [:div
       [:input {:type "text"
                :value @amt
                :on-change #(reset! amt (-> % .-target .-value))}]
       [:input {:type "button"
                :value unit}]])))

在我将 :value 更改为 :defaultValue 之前，输入值不会更改。我很确定上面的示例与 Reagent 的输入示例非常相似。

在下面的代码中，我试图在用户更新输入值时做两件事。我正在尝试 reset! 输入的值以及 dispatch 事件处理程序的值。我已经在 do 调用中完成了这两个函数调用。

另外值得注意的是，在下面的代码中，用户能够更新文本字段中的值。

(defn measurement-input [{:keys [amount unit path]}]
  (let [amt (atom amount)]
    (fn []
      [:div
       [:input {:type "text"
                :value @amt
                :on-change (do #(reset! amt (-> % .-target .-value))
                                (re-frame/dispatch [:update-value @amt]))}]
       [:input {:type "button"
                :value unit}]])))

在 javascript 控制台中，我收到以下错误：

Uncaught TypeError: Cannot read property 'call' of null  template.cljs?rel=1435381284083:101

感谢大家的帮助！

Answer 1

ClojureScript Google 小组的 Daniel Kersten 向我解释了为什么代码片段不起作用。 link 到 post 是 here.

第一个代码片段

reagent 用它自己的实现覆盖了 clojure 的原子。 re-frame 的 views.cljs 默认不引用这个。一旦你参考 reagent 的 atom 版本，事情就会起作用。

在 views.cljs 文件的顶部，更改为：

(ns performance-tracker.views
    (:require [re-frame.core :refer [subscribe dispatch]]))

至：

(ns performance-tracker.views
    (:require [reagent.core  :as reagent :refer [atom]]
              [re-frame.core :refer [subscribe dispatch]]))

第二个代码片段

:on-change 需要一个函数。我传递了一个 do 块。只需将 do 块包装在一个函数中即可修复错误。请参阅下面的正确代码：

(defn measurement-input [{:keys [amount unit path]}]
  (let [amt (atom amount)]
    (fn []
      [:div
       [:input {:type "text"
                :value @amt
                :on-change #(do (reset! amt (-> % .-target .-value)) ;; argument literal, %, is the event passed in the function callback
                            (re-frame/dispatch [:update-value @amt [:measurements path :amount]]))}]
       [:input {:type "button"
                :value unit}]])))

重新框架：输入：更改重置！不改变输入值

re-frame: Input :on-change reset! doesn't change input value

clojurescript

reagent

re-frame