Managing state in Reagent components

more.cljs

(def React js/React)
(def ReactDOM js/ReactDOM)

(def create-element React.createElement)


#_
(defn item
  [{:keys [value label]}]
  (create-element
   ReactNative.Picker.Item
   #js {:label label :value value}))


(defn AAA
  [props & args]

  (this-as this

    (create-element
     "div" #js {}

     (create-element
      "input" #js {:value (or (some-> this .-state .-value)
                              "")
                   :onChange
                   (fn [e]
                     (let [value (some-> e .-target .-value)]
                       (.setState this #js {:value value})))}))))

;; context updater

(defn MyComp
  [props]
  (let [this (js-this)]
    (js/React.Component.call this props)
    (set! (.-state this) #js {:value "ssss"})
    this)


  #_
  (this-as this
    (js/React.Component.call this props)
    (set! (.-state this) #js {:value "ssss"})



    ))



(js/goog.object.extend
 (.-prototype MyComp)
 js/React.Component.prototype
 #js {
      :render
      (fn []
        (let [foo (atom nil)]
          (this-as this

            ;; (print this)
            ;; (js/console.log this)

            (create-element
             "div" nil

             (create-element
              "input" #js {:value (or
                                   (some-> this .-state .-value :foo)
                                   ""

                                   )

                           :onChange
                           (fn [e]

                             (some-> this .-state js/console.log)


                             (let [value (some-> e .-target .-value)]
                               (reset! foo value)
                               ;; (set! (.-state this) {:value value})
                               (.setState this #js {:value {:foo value}})
                               ))})))))})



(defn ^:export init
  []
  (.render ReactDOM
           (create-element MyComp #js {:value "ssss"})
           (js/document.getElementById "page"))

sample.cljs

(def ReactNative (js/require "react-native"))

(def React (js/require "react"))

(def create-element React.createElement)

(defn MyPicker
  [& args]
  (this-as this
    (apply ReactNative.Picker this args)))


(defn item
  [{:keys [value label]}]
  (create-element
   ReactNative.Picker.Item
   #js {:label label :value value}))


(js/goog.object.extend
 (.-prototype MyPicker)
 (.-prototype ReactNative.Picker)
 #js {:render
      (fn []
        (this-as this
          (create-element
           ReactNative.Picker

           #js {:selectedValue
                (some-> this .-state .-selectedValue)

                :onValueChange
                (fn [value index]
                  (.setState this #js {:selectedValue value}))}

           (to-array (map item assets/countries)))))})

(def my-picker
  (r/adapt-react-class MyPicker))