I have been trying to update the email and password value on submitting the formso that I can pass them in my login API parameters. But I have tried almost everything, the value of this.state won't just update. Every time I try to print the value in console log e.g: cosole.log(this.state.email), it prints empty string i.e the default value set previously.Here is my code below:
login.jsimport React, { Component } from 'react';import { ThemeProvider, Button } from 'react-native-elements';import BliszFloatingLabel from './BliszFloatingLabel'import { StyleSheet, Text, View, Image, TextInput, Animated, ImageBackground, Linking} from 'react-native';const domain = 'http://1xx.xxx.xx.xxx:8000';class Login extends Component { state = { email: '', password: '', } LoginAPI = (e,p) => { console.log(e, "####") } handleEmail = (text) => { this.setState({ email: text }) } handlePassword = (text) => { this.setState({ password: text }) } goToSignUpScreen=() =>{ this.props.navigation.navigate('SignUpScreen'); }; goToForgotPasswordScreen=() =>{ this.props.navigation.navigate('ForgotPasswordScreen'); }; render() { return (<View style={styles.container} ><ImageBackground source={require('../bgrndlogin.jpeg')} style={styles.image} ><View style={styles.heading}><Image style={styles.logo} source={require('../loginlogo.png')} /><Text style={styles.logoText}>Login</Text><Text style={styles.logodesc}>Please Login to continue --></Text></View><View style={styles.form_container}><BliszFloatingLabel label="Email Id" value={this.state.email} onChangeText = {this.handleEmail} onBlur={this.handleBluremail} /><BliszFloatingLabel label="Password" value={this.state.password} onChangeText = {this.handlePassword} onBlur={this.handleBlurpwd} secureTextEntry={true} /><ThemeProvider theme={theme}><Button buttonStyle={{ opacity: 0.6, backgroundColor: '#CC2C24', borderColor: 'white', borderWidth: 1, width: 200, height: 50, marginTop: 30, marginLeft: '20%', alignItems: 'center', justifyContent: "center" }} title="Login" type="outline" onPress = { () => this.LoginAPI(this.state.email, this.state.password) } /></ThemeProvider><Text style={{ marginTop: 70, color: '#CC2C24', fontSize: 16, fontWeight: "bold" }} onPress={ this.goToForgotPasswordScreen }> Forgot Password?</Text><Text style={{ marginTop: 20, color: '#CC2C24', fontSize: 16, fontWeight: "bold" }} onPress={ this.goToSignUpScreen }> Don't have an Account?</Text></View></ImageBackground></View> ) }}const styles = StyleSheet.create({ container: { flex: 1, }, logo: { width: 115, height: 50, }, logoText: { color: 'white', fontSize: 36, fontWeight: "bold" }, logodesc: { color: '#CC2C24', fontSize: 18, fontWeight: "bold" }, heading: { flex: 3, marginLeft:20, marginTop:30 }, form_container: { flex: 7, marginLeft:20, marginTop:30, marginRight: 20, }, image: { flex: 1, resizeMode: "cover", justifyContent: "center" },});const theme = { Button: { titleStyle: { color: 'white', fontWeight: "bold", fontSize: 18 }, },};export default Login;
I have created a common form as below which I inherit everywhere :BliszFloatingLabel.js
import React, { Component } from 'react';import { Text, View, TextInput, Animated,} from 'react-native';class BliszFloatingLabel extends Component { state = { entry: '', isFocused: false, }; UNSAFE_componentWillMount() { this._animatedIsFocused = new Animated.Value(0); } handleInputChange = (inputName, inputValue) => { this.setState(state => ({ ...state, [inputName]: inputValue // <-- Put square brackets })) } handleFocus = () => this.setState({ isFocused: true }) handleBlur = () => this.setState({ isFocused: true?this.state.entry!='' :true}) handleValueChange = (entry) => this.setState({ entry }); componentDidUpdate() { Animated.timing(this._animatedIsFocused, { toValue: this.state.isFocused ? 1 : 0, duration: 200, useNativeDriver: true, }).start(); } render() { // console.log(this.state.entry) const { label, ...props } = this.props; const { isFocused } = this.state; const labelStyle = { position: 'absolute', left: 0, top: !isFocused ? 40 : 0, fontSize: !isFocused ? 16 : 12, color: 'white', }; return (<View style={{ paddingTop: 20,paddingBottom:20 }}><Text style={labelStyle}> {label}</Text><TextInput {...props} style={{ height: 50, fontSize: 16, color: 'white', borderBottomWidth: 1, borderBottomColor: "white" }} value={this.state.entry} onChangeText={this.handleValueChange} onFocus={this.handleFocus} onBlur={this.handleBlur} blurOnSubmit /></View> ) } } export default BliszFloatingLabel;
