This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-04-15
Channels
- # admin-announcements (10)
- # aws (2)
- # beginners (27)
- # boot (3)
- # cbus (4)
- # cider (1)
- # clara (6)
- # cljs-dev (3)
- # cljsrn (14)
- # clojure (98)
- # clojure-boston (1)
- # clojure-brasil (1)
- # clojure-czech (3)
- # clojure-dusseldorf (11)
- # clojure-greece (3)
- # clojure-japan (3)
- # clojure-korea (1)
- # clojure-russia (138)
- # clojure-uk (11)
- # clojurescript (76)
- # component (2)
- # core-matrix (1)
- # cursive (25)
- # data-science (3)
- # devcards (1)
- # euroclojure (4)
- # events (3)
- # funcool (1)
- # hoplon (219)
- # immutant (40)
- # juxt (8)
- # leiningen (1)
- # off-topic (34)
- # om (148)
- # onyx (10)
- # overtone (2)
- # proton (1)
- # re-frame (8)
- # reagent (3)
- # ring-swagger (5)
- # spacemacs (17)
- # untangled (47)
- # yada (19)
I would like to have 3 input fields. when one is submitted the next one should get the focus. did somebody do that before? I thought that should be an easy task but it seems to not be so easy.
I wanted to have a :focus property that I can just set to true or to false so that I can save that in my state which one should have the focus. but there is no focus prop and I had a hard time to figure out on which object I can call the focus function
this is what I have so far:
(defn focusable-input [attrs]
(r/create-class
{:component-will-receive-props (fn [this new-argv]
(when (:focus (ru/extract-props new-argv))
(.focus (aget this "refs" (:ref attrs)))))
:display-name "focusable-input"
:reagent-render
(fn [attrs]
[input attrs])}))
i can use it than like that:
[focusable-input
{:ref "my-input"
:focus (:my-input-is-focused @my-state)
:on-submit-editing
#(do (swap! my-state assoc :my-input-is-focused false)
(swap! my-state assoc :next-input-is-focused true))]
Is there a better way as using "ref" to do the focus? Am I maybe missing something and there is a lot simpler way? Am I doing it wrong? 😄 (I am new to the reagent and react native world...)
@knotschi: in rum
i'd keep a local atom on a parent view with "who is focused" flags, on submit changed their values, and re-rendered accordingly.
wanted to show you this, https://github.com/facebook/react-native/issues/641 but you already saw it
yeah thats probably a good Idea for the whole form. But I still need an input component that accepts a :focus property. My problem was more the calling of the focus function. The only way I found was with using a ref to get the object inside :component-will-receive-props to call the focus function. this feels quite hacky
@knotschi: maybe reagent has something similar to this: https://github.com/tonsky/rum/blob/gh-pages/examples/rum/examples/custom_props.cljs