react native get TextInput value

Question

I am stuck with a very simple problem  I have login form with username  password and button  In my button handler  I try to get the textinput value  But always get undefined value  Am I missing something   render              lt ExScreen           headerColor  this state headerColor            scrollEnabled  this state enableScroll            style  styles container   gt             lt View  gt               lt View   gt                 lt View style   styles inputContainer    gt                   lt TextInput                   ref   username                    onChangeText   text    gt  this setState  text                      value  this state username                    gt                 lt  View gt    lt Button style   color   white   marginTop  30  borderWidth  1  borderColor   white   marginLeft  20 vw  marginRight  20 vw  height  40  padding  10                 onPress  this  handlePress bind this   gt                Sign In              lt  Button gt           handlePress event        var username this refs username value

User · Answer

There is huge difference between onChange and onTextChange prop of  lt TextInput   gt   Don t be like me and use onTextChange which returns string and don t use onChange which returns full objects  I feel dumb for spending like 1 hour figuring out where is my value

User · Answer

If you are like me and doesn t want to use or pollute state for one-off components here s what I did   export default class Registartion extends Component      register        gt        const payload           firstName  this firstName           other values               console log payload         render         return          lt RegisterLayout gt           lt Text style  styles welcome  gt            Register          lt  Text gt            lt InputText           placeholder  First Name            onChangeText   text    gt  this firstName   text    gt             More components             lt CustomButton           backgroundColor  steelblue            handlePress  this  register  gt            Submit          lt  CustomButton gt        lt  RegisterLayout gt

User · Answer

You should use States to store the value of input fields  https   facebook github io react-native docs state html   To update state values use setState      onChangeText   value     this setState  username  value       and get input value like this      this state username   Sample code   export default class Login extends Component        state             username   demo           password   demo               lt Text style  Style label  gt User Name lt  Text gt       lt TextInput         style  Style input          placeholder  UserName          onChangeText   value    gt  this setState  username  value            value  this state username        gt        lt Text style  Style label  gt Password lt  Text gt       lt TextInput         style  Style input          placeholder  Password          onChangeText   value    gt  this setState  password  value            value  this state password        gt        lt Button         title  LOGIN          onPress       gt                                 if this state username localeCompare  demo    0                       ToastAndroid show  Invalid UserName  ToastAndroid SHORT                       return                                     if this state password localeCompare  demo    0                       ToastAndroid show  Invalid Password  ToastAndroid SHORT                       return                                       Handle LOGIN                                gt

User · Answer

This work for me        lt Form gt        lt TextInput     style   height  40       placeholder  userName      onChangeText   text    gt  this userName   text        gt        lt TextInput     style   height  40       placeholder  Password      onChangeText   text    gt  this Password   text        gt         lt Button      title  Sign in        onPress  this  signInAsync         gt        lt  Form gt    and     signInAsync   async      gt            console log this userName          console log this Password

User · Answer

Did you try   var username this state username

User · Answer

This piece of code worked for me  What I was missing was I was not passing  this  in button action    onPress  this  handlePress bind this   gt  --------------     handlePress event    console log  Pressed       var username   this state username   var password   this state password    console log username    console log password        render         return          lt View style  styles container  gt          lt TextInput       ref  usr        style   height  40  borderColor   gray   borderWidth  1   marginTop  10   padding   10   marginLeft   5   marginRight   5          placeHolder   Enter username         placeholderTextColor     a52a2a         returnKeyType     next         autoFocus    true        autoCapitalize    none        autoCorrect    false        clearButtonMode    while-editing        onChangeText   text    gt              this setState  username text                     onSubmitEditing   event    gt         this refs psw focus                      gt          lt TextInput       ref  psw        style   height  40  borderColor   gray   borderWidth  1   marginTop  10 marginLeft   5   marginRight   5         placeholder   Enter password        placeholderTextColor     a52a2a        autoCapitalize    none        autoCorrect    false        returnKeyType     done         secureTextEntry    true        clearButtonMode    while-editing        onChangeText   text    gt              this setState  password text                       gt          lt Button         style   borderWidth  1  borderColor   blue            onPress  this  handlePress bind this   gt          Login        lt  Button gt          lt  View gt

User · Answer

Please take care on how to use setState    The correct form is  this setState         Key  Value            And so I would do it as follows   onChangeText   event    gt  this setState  username event nativeEvent text            var username this state username

User · Answer

Every thing is OK for me by this procedure    lt Input onChangeText  this inputOnChangeText    gt    and also   inputOnChangeText    e    gt      this setState       username  e

User · Answer

x000D   x000D  export default class App extends Component   x000D    state     username      password       x000D   x000D    onChangeText    key  val    gt    x000D      this setState    key   val   x000D      x000D     x000D    render      x000D      return   x000D         lt View style  styles container  gt  x000D             lt Text gt Login Form lt  Text gt  x000D             lt TextInput x000D              placeholder  Username  x000D              onChangeText  val   gt  this onChangeText  username   val   x000D              style  styles input  x000D              gt  x000D             lt TextInput x000D              placeholder  Password  x000D              onChangeText  val   gt  this onChangeText  password   val   x000D              style  styles input  x000D              secureTextEntry  true  x000D              gt        x000D         lt  View gt  x000D         x000D      x000D    x000D   x000D   x000D    Hope this will solve your problem

User · Answer

The quick and less optimized way to do this is by using arrow function inside your onChangeText callback  by passing username as your argument in your onChangeText callback    lt TextInput     ref    el    gt    this username   el         onChangeText   username    gt  this setState  username        value  this state username    gt    then in your  handlePress method   handlePress event        let username this state username        But this has several drawback      On every render of this component a new arrow function is created  If the child component is a PureComponent it will force re-renders unnecessarily  this causes huge performance issue especially when dealing with large lists  table  or component iterated over large numbers  More on this in React Docs   Best practice is to use a handler like handleInputChange and bind    this   in the constructor       constructor props      super props     this handleChange  this handleChange bind this          handleChange event           const name   event target  amp  amp  event target name    const value   event target  amp  amp  event target value     this setState  name   value          render              lt TextInput     name  username      onChangeText  this handleChange      value  this state username      gt                   Or if you are using es6 class property shorthand which autobinds this   But this has drawbacks  when it comes to testing and performance  Read More Here      handleChange   event         gt      const name   event target  amp  amp  event target name    const value   event target  amp  amp  event target value     this setState  name   value          render              lt TextInput     name  username      onChangeText  this handleChange      value  this state username      gt

User · Answer

In React Native 0 43   Maybe later than 0 43 is OK     handlePress event        var username  this refs username  lastNativeText

User · Answer

Simply do it   this state  f name       textChangeHandler   async  key  val    gt        await this setState    key   val         lt Textfield onChangeText  val   gt  this textChangeHandler  f name   val   gt

User · Answer

Try Console log the object and you will find your entered text inside nativeEvent text  example   handelOnChange    enteredText    gt        console log enteredText nativeEvent text    render   return        lt SafeAreaView gt           lt TextInput             onChange  this handelOnChange           gt   lt  SafeAreaView gt

User · Answer

constructor props            super props            this state                commentMsg                                onPress        gt              alert  Hi    this state commentMsg             lt View style  styles sendCommentContainer  gt         lt TextInput         style  styles textInput          multiline  true          onChangeText   text    gt  this setState  commentMsg  text            placeholder   Comment   gt           lt Button onPress  this onPress              title  OK              color   841584            gt      lt  TouchableOpacity gt    lt  View gt

User · Answer

User in the init of class   constructor         super       this state             email               Then in some function   handleSome        gt            console log this state email         And in the input    lt TextInput onChangeText   email    gt  this setState  email     gt

User · Answer

If you set the text state  why not use that directly     handlePress event      var username this state text    Of course the variable naming could be more descriptive than  text  but your call

[react-native] react native get TextInput value

Examples related to react-native