Re-frame: Input: on-change reset! does not change input value

Question

I play with a re-frame .

---

In the code below, I am having problems updating the input value when the user enters something into:

 (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}]]))) 

The input value will not change until I change :value to :defaultValue . I am sure that the above example closely reflects the Reagent input example.

---

In the code below, I try to do two things when the user updates the input value. I'm trying to reset! enter a value, as well as dispatch value for the event handler. I wrapped both of these function calls in a do call.

It should also be noted that in the code below, the user can update the value in the text box.

 (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}]]))) 

The following error appears in the javascript console:

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

---

Any help is appreciated by everyone!

Answer 1

Daniel Kersten in the Google ClojureScript groups explained to me why the code snippets do not work. Link to the message here .

---

1st code snippet

reagent redefines the clojure atom with its own implementation. re-frame views.cljs does not reference this by default. When you look at the reagent version of atom , everything will work.

At the top of the views.cljs file views.cljs change this:

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

in

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

---

2nd code snippet

:on-change expects a function. I passed in the do block. A simple wrap of the do block inside the function fixed an error. The following is the correct code:

 (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}]])))