This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-07-16
Channels
- # aleph (2)
- # announcements (1)
- # beginners (162)
- # calva (16)
- # cider (37)
- # cljdoc (9)
- # cljs-dev (2)
- # cljsrn (3)
- # clojure (86)
- # clojure-dev (17)
- # clojure-europe (3)
- # clojure-houston (1)
- # clojure-italy (6)
- # clojure-nl (3)
- # clojure-spec (10)
- # clojure-uk (20)
- # clojuredesign-podcast (15)
- # clojurescript (7)
- # data-science (14)
- # datascript (1)
- # datomic (5)
- # emacs (8)
- # figwheel-main (8)
- # fulcro (25)
- # graalvm (1)
- # jobs (10)
- # jobs-discuss (4)
- # keechma (14)
- # leiningen (2)
- # off-topic (31)
- # onyx (1)
- # other-languages (4)
- # pathom (4)
- # pedestal (1)
- # re-frame (20)
- # remote-jobs (4)
- # shadow-cljs (25)
- # sql (6)
- # tools-deps (15)
- # vim (18)
- # xtdb (9)
What is best way to store input field values and show them in :value
attribute of input
in re-frame
and reagent
app ?
In case you are typing into same :input
you have :value @(subscribe [::field-value]
on, some hits might even be missed (most noticeable with automated tests).
You could either use :default-value
instead of :value
instead (that way initial values of the form will be correct, but no fields will be affected by any modifications to the app-db)
or if you need to update :input
values when db changes, you could use events :on-blur
and :on-focus
to store currently focused field for which you wouldn't add subscription for :value
prop and have that subscription for all unfocused fields (so value for currently focused :input
would sync once the input would lost it's focus).
Example of :input
with :default-value
can be seen here: https://github.com/imatic/re-frame-form/blob/e4f2ca430dc83e3e9d78402c4dddee3a8ddb9480/examples/re-frame-form/src/example/core.cljs#L60
`
@nenadalm I'm using :default-value
now, it works, but form is not cleared after submission.
It only clears when for component re-renders.
Is there any way to clear forms? or should I force re-render form component to clear it?
@UCMNZLJ93 maybe [:button {:type "reset"}]
: https://www.w3schools.com/tags/att_button_type.asp
@U08JKUHA9 I want to reset after confirmation that it's submitted to server.
You could also reset the form by calling reset
method on form
element: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset. You can get access to the element via :ref
prop (https://reactjs.org/docs/refs-and-the-dom.html#creating-refs). It expects function that it will pass the element as first argument.
Another option would be to do something like:
(defn form-component []
(let [default-value ""
;; should we do the reset?
reset @(re-frame/subscribe [:do-reset])
;; if we do reset, notify the app that the reset is done
_ (when reset (re-frame/dispatch [:reset-done]))]
[:input (merge {:type :email}
(when reset
;; sets value of the input on reset
{:value default-value}))]))
instead of having the event and subscription for reset as above, you could also have correct values in app-db
and pass :value
prop in case the :input
is not focused (then all your inputs would be synced with app-db
in case they weren't currently focused, so you could reset the form by just setting correct values inside app-db
).I'm storing values in re-frame
db and showing them in :value
attribute by subscribe
ing.
But it is slowing down input reaction.
I use one subscription for two input
items.
Subscription reads from same db
entity in which it is written.
you could try using re-frame-10x to debug where the latency is coming from: https://github.com/Day8/re-frame-10x
If I may, I’d say don’t store the values in the global state.. for on-change events I’d keep it local with a ratom
@UE35Y835W component appears and disappears on toggle button, but I want to persist state between toggles.
I see! I’d store the values on-toggle with an event that takes your values from the ratom :) .. anyways I had the slowness problem once and it was due to a specific function that was being re-run over and over on every input change.. To see if this could be your case, writing in the inputs should get slower and slower as you keep typing.. (to notice go ahead and type about 100/200 chars in the input)
Or taking values from ratom on on-blur
event and storing in app-db
can work.
storing values in app-db
on on-change
slows it more.
@nenadalm I'm using :default-value
now, it works, but form is not cleared after submission.
It only clears when for component re-renders.
Is there any way to clear forms? or should I force re-render form component to clear it?