重新框架:输入:改变重置!不会改变输入值

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

Daniel Kersten 在 ClojureScript Google Groups 向我解释了为什么代码片段不起作用。这篇文章的链接在这里。

第一个代码片段

reagentclojure用它自己的实现覆盖的原子。re-frame'sviews.cljs默认不引用 this。一旦您参考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}]])))