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

Answer 1

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)}>
--------------

  _handlePress(event) {
console.log('Pressed!');

 var username = this.state.username;
 var password = this.state.password;

 console.log(username);
 console.log(password);
}

  render() {
    return (
      <View style={styles.container}>

      <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) => {
          this.setState({username:text});
        }}
      onSubmitEditing={(event) => {
     this.refs.psw.focus();

      }}
      />

      <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) => {
          this.setState({password:text});
        }}
      />

      <Button
        style={{borderWidth: 1, borderColor: 'blue'}}
        onPress={this._handlePress.bind(this)}>
        Login
      </Button>

      </View>
    );``
  }
}

Answer 2

Try Console log the object and you will find your entered text inside nativeEvent.text

example:

handelOnChange = (enteredText) => {
    console.log(enteredText.nativeEvent.text)
}
render()
return (
    <SafeAreaView>
        <TextInput
            onChange={this.handelOnChange}
        >
</SafeAreaView>

)

Answer 3

User in the init of class:

constructor() {
    super()
    this.state = {
        email: ''
    }
}

Then in some function:

handleSome = () => { console.log(this.state.email) };

And in the input:

<TextInput onChangeText={(email) => this.setState({email})}/>

Answer 4

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 = () => {
    const payload = {
      firstName: this.firstName,
      /* other values */
    }

    console.log(payload)
  }

  render() {
    return (
      <RegisterLayout>
        <Text style={styles.welcome}>
          Register
        </Text>

        <InputText
          placeholder="First Name"
          onChangeText={(text) => this.firstName = text} />
        // More components...
        <CustomButton
          backgroundColor="steelblue"
          handlePress={this._register}>
          Submit
        </CustomButton>
     </RegisterLayout>
    )
  }
}