This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-04-10
Channels
- # announcements (2)
- # babashka (20)
- # beginners (381)
- # calva (16)
- # chlorine-clover (21)
- # cider (1)
- # clj-kondo (18)
- # cljs-dev (107)
- # cljsrn (2)
- # clojure (161)
- # clojure-dev (5)
- # clojure-europe (2)
- # clojure-losangeles (3)
- # clojure-nl (3)
- # clojure-uk (35)
- # clojurescript (22)
- # conjure (48)
- # cursive (8)
- # datascript (11)
- # datomic (6)
- # figwheel-main (10)
- # fulcro (85)
- # hoplon (112)
- # jobs (1)
- # kaocha (5)
- # luminus (5)
- # malli (1)
- # off-topic (96)
- # onyx (1)
- # pedestal (1)
- # perun (1)
- # reagent (5)
- # reitit (1)
- # shadow-cljs (34)
- # specmonstah (1)
- # sql (6)
- # tools-deps (3)
- # xtdb (23)
Hi guys, I’m using re-natal, re-frame and reagent for my app and would like to fix the controlled input problem (https://github.com/reagent-project/reagent/blob/master/doc/ControlledInputs.md). The way this is fixed in web react environment is by using reagents :input field (that sets manully the focus to the end of the typed input). Any advice/code examples on how to solve this in a react native environment ? Thanks
the best solution I’ve found for the moment (inspired by https://github.com/reagent-project/reagent/pull/380/commits/8e137ec24a586d4529d04e222c579c61657fa85a) is to imitate the react native code examples, by setting manually a state and updating it.
(def input-value (r/atom "initial value"))
(defn my-input []
(r/create-class
{:display-name "my-input-component"
:getInitialState
(fn [this]
(->js (merge (->clj (.-state this))
{:v @input-value})))
:should-component-update (fn [this old-argv new-argv] true)
:reagent-render
(fn []
(let [this (r/current-component)]
[ra/view
[ra/text-input
{:label "my input"
:value (.. this -state -v)
:onChangeText #(do
(reset! input-value %)
(.setState this #js {:v %}))}]]))}))