how to get input value in react native? - reactjs

Question

could you please tell me how to get input field value or in other words username and password input field value on button click .
here is my code
https://rnplay.org/apps/drT9vw
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
Text,
View,
Image,
StyleSheet,
TextInput,
TouchableHighlight
} from 'react-native';
class App extends React.Component {
constructor(props){
super(props);
this.state ={
userName :'',
password:''
};
}
login(){
alert(this.state.userName)
}
OnChangesValue(e){
console.log(e.nativeEvent.text);
this.setState({
userName :e.nativeEvent.text,
})
}
changePassword(e){
console.log(e.nativeEvent.text);
this.setState({
password :e.nativeEvent.text,
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.heading}> Login</Text>
<TextInput
style={styles.loginInput}
onChange={(text)=> this.setState({userName:text})}
ref="myInput"
underlineColorAndroid='transparent'
placeholder="username !"
/>
<TextInput
style={styles.loginInput}
ref="pass"
onChange={this.changePassword.bind(this)}
underlineColorAndroid='transparent'
placeholder="password to ff!"
secureTextEntry={true}
/>
<TouchableHighlight style={styles.touchable} onPress={this.login.bind(this)}>
<Text style={styles.touchableButton}>Click</Text>
</TouchableHighlight>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#EF501E',
flex: 1,
alignItems: 'center',
padding :20
},
logo: {
width: 50,
height: 50
},
heading: {
fontSize: 30,
marginTop: 20
},
loginInput: {
height: 50,
alignSelf: 'stretch',
borderWidth: 1,
borderColor: '#33090C',
flexDirection: 'row',
justifyContent: 'center',
marginBottom:10
},
touchable:{
backgroundColor:'#2E18DD',
height:40,
alignSelf:'stretch',
alignItems:'center',
justifyContent:'center'
},
touchableButton:{
color:'#fff',
fontSize:10
}
});
registerComponent(App);
update
login(){
alert(this.refs.myInput.value)
}
it give undefined

Answer 1

Not getting the exact issue, u are storing the userName and password in state variable. So you can get the values the by this.state.userName and this.state.password. or u can use the refs also to get the value like this: this.refs.myInput.value.
Change this fun:
changePassword(text){
console.log(text);
this.setState({
password :text,
})
}
Check the same example on tutorialspoint: https://www.tutorialspoint.com/react_native/react_native_text_input.htm

Answer 2

It can be done in two ways. If the input fields are controlled, you can get the values from the state itself. In case of uncontrolled input fields (your case), you can use refs to get the input values
login() {
console.log(this.refs.myInput.value)
}