YLS YLS - 13 days ago 5
Android Question

how to get TextInput value without using state in react native android

Here i am trying to get the TextInput value using the const value username and password but i get undefined. How to use state or props in this. I followed this tutorial https://medium.com/react-native-training/react-native-navigator-experimental-part-2-implementing-redux-c6acbf66eca1#.d0vteepp7

import React, { Component } from 'react'
import {
View,
Text,
TextInput,
Alert
} from 'react-native'
import Button from './Button'

const route = {
type: 'push',
route: {
key: 'about',
title: 'About'
}
}

const _values = {
username: '',
password: ''
}

const LoginView = ({_handleNavigate}) => {

const _handlePress = () => {

const {username, password} = _values
console.log('username' + username + "" + password);

return fetch('http://webservice.net/User/ValidateUser', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
UserName: username,
Password: password,
DeviceType: 'Android',
DeviceToken: 'eU0z3IR96Mg:APA91bHNyEw3CcMCHZ-MmGhFVRV8XT292NYzrD2xedMFLXdaJqcJ4DXlBmn'
})
}).then(response => response.json())
.then(response => {
console.log(response);
Alert.alert('Response message is:', response.parse)
_handleNavigate(route)
return response;
})
.catch(error => {
console.error(error);
});
};

return (
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
<Text style={{ backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center', color: 'white', marginBottom: 30 }}>
LOGIN
</Text>
<View style={{ justifyContent: 'center' }}>
<TextInput
style={{ height: 40, margin: 30, color: 'white', fontSize: 20 }}
placeholder='Username' placeholderTextColor='white'
autoFocus={true}
/>
<TextInput
secureTextEntry={true}
style={{ height: 40, margin: 30, color: 'white', fontSize: 20 }}
placeholder='Password' placeholderTextColor='white'
/>
</View>
<Button onPress={() => { _handlePress() } } label='Login' />
</View>
)
}
export default LoginView

Answer

You can attach TextInput's onChangeText event' handler and store its argument , like:

<TextInput
   onChangeText={(val) => _values.username = val}
   ...
/>