reagent render `Input` dosen't support Chinse and cursor doesn't perform well

[kangbb]

version

• 0.8.1

What I do

I use reagent.core/create-class to create a Component Class with some React Native UI Component, including TextInput. And the render state is reagent own, which is .-cljsState.It works correctly with English, but I can input Chinese. This is the code snippet:

(defn page []
  (r/create-class
    {:get-initial-state (fn [this]
                                 (set!  (.-state this) {:search ""}))
     :render (fn [this]
               [:> rn/View
                [:> rn/TextInput {:placeholder "Search"
                                  :getInitialState (fn [this]
                                                     (set! (.-state this) {:search ""}))
                                  :onChangeText #(reset! (.-cljsState this) {:search %})
                                  :value (:search @(.-cljsState this))}]])}))

[Deraen]

I'm not able to help much with React-native.

I do believe Chinese works in normal HTML inputs with Reagent? This would point this being React-native problem. Are you running latest React-native? Quick search to their issues reveals e.g. this issue that was fixed on 0.57: https://github.com/facebook/react-native/issues/18403

You could also try uncontrolled input, i.e. without :value, then you can't set the initial value or update the value, but user can type and you can get the value, and the performance is going to be better.

[kangbb]

I'm not able to help much with React-native.

I do believe Chinese works in normal HTML inputs with Reagent? This would point this being React-native problem. Are you running latest React-native? Quick search to their issues reveals e.g. this issue that was fixed on 0.57: facebook/react-native#18403

You could also try uncontrolled input, i.e. without :value, then you can't set the initial value or update the value, but user can type and you can get the value, and the performance is going to be better.

It's exactly that we can use uncontrolled component. But it looks like that reagent can't work well with react native controlled component. I have do some another trying about it, although it works well in React environment, with javascript to use it.

[markokocic]

It looks like the latest reagent still has an issue with controlled components. See #485