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

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) => this.setState({username:event.nativeEvent.text})}
...    
var username=this.state.username;

Answer 2

Every thing is OK for me by this procedure:

<Input onChangeText={this.inputOnChangeText} />

and also:

inputOnChangeText = (e) => {
  this.setState({
    username: e
  })
}

Answer 3

export default class App extends Component {
  state = { username: '', password: '' }

  onChangeText = (key, val) => {
    this.setState({ [key]: val})
  }
  
  render() { 
    return (
      <View style={styles.container}>
          <Text>Login Form</Text>
          <TextInput
            placeholder='Username'
            onChangeText={val => this.onChangeText('username', val)}
            style={styles.input}
          />
          <TextInput
            placeholder='Password'
            onChangeText={val => this.onChangeText('password', val)}
            style={styles.input}
            secureTextEntry={true}
          />      
      </View>
    );
  }
}

Hope this will solve your problem

Answer 4

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'
    };

    <Text style={Style.label}>User Name</Text>
    <TextInput
        style={Style.input}
        placeholder="UserName"
        onChangeText={(value) => this.setState({username: value})}
        value={this.state.username}
    />

    <Text style={Style.label}>Password</Text>
    <TextInput
        style={Style.input}
        placeholder="Password"
        onChangeText={(value) => this.setState({password: value})}
        value={this.state.password}
    />

    <Button
        title="LOGIN"
        onPress={() => 
            {
                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

            }
        }
    />

Answer 5

In React Native 0.43: (Maybe later than 0.43 is OK.)

_handlePress(event) {
    var username= this.refs.username._lastNativeText;

Answer 6

Did you try

var username=this.state.username;