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

894 views
Skip to first unread message

Kurt Mueller

unread,
Jun 29, 2015, 10:17:59 AM6/29/15
to clojur...@googlegroups.com
I've asked this question on StackOverflow: http://stackoverflow.com/questions/31107633/re-frame-input-on-change-reset-doesnt-change-input-value

I figure it couldn't hurt asking it here:

---
In the code below, I am having trouble with updating the input value when the user types something in:

```
(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 until I change :value to :defaultValue. I am pretty sure the above example closely mirrors Reagent's input example.

---

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

Also of note is that in the code below, the user is able to update the value in the text field.

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

In the javascript console, I get the following error:

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

Any help is appreciated!

Daniel Kersten

unread,
Jun 29, 2015, 11:10:00 AM6/29/15
to clojur...@googlegroups.com

Can you confirm that amt is a reagent ratom and not a clojure atom?

The on-change in the second example is not correct - the anonymous function is thrown away and the dispatch runs on render. You probably wanted this:

#(do (reset! amt (-> % .-target .-value))
         (re-frame/dispatch [:update-value @amt]))

That is, the do is inside the function.


--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to the Google Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.
Message has been deleted

Kurt Mueller

unread,
Jun 29, 2015, 1:18:38 PM6/29/15
to clojur...@googlegroups.com
I could kiss you.

If you like, you can formally answer my stack overflow post and I'll mark yours as the correct answer. If not, I'll answer it on your behalf and reference this post.

I can see how my code snippet was wrong now. Here's how I interpret your correct code:

#(do (reset! amt (-> % .-target .-value))
(re-frame/dispatch [:update-value @amt]))

The on-change function is a callback (do those exist in clojure?). When called, it grabs the event (in this case, it's represented as argument literal) and the event target and value and set is amt to be equal to it. Then, it dispatches that amount to the update-value handler.

Is that a correct reading?

Thanks for your help again! I really appreciate it.

Kurt

Kurt Mueller

unread,
Jun 29, 2015, 1:22:19 PM6/29/15
to clojur...@googlegroups.com
Another question. Is `do` a bad habit in ClojureScript? It seems like it could be abused... like, it's the closest way to creating side effects in a clojure function.

Thanks again.

Kurt

Colin Yates

unread,
Jun 29, 2015, 1:27:37 PM6/29/15
to clojur...@googlegroups.com
‘do’ is neither good nor bad - it depends what you ‘do’ with it :). If you find yourself writing anonymous functions that turn into more than one line or if conditionals that turn into more than one line then the code would start to smell, but I wouldn’t put it in concrete, unambiguous terms as ‘good’ or ‘bad’.
Reply all
Reply to author
Forward
0 new messages