I don't get where it went wrong? How to make it work on the first click? Why do I have to click twice for an event to fire in react? For the first time if i click, it does not do anything. It submits the form only after second click. Why is this happening? If anyone can help me fix this issue and tell me where it went wrong?
export class Signup extends React.Component {
constructor(props) {
super(props);
this.state = {
full_name: "",
email: "",
confirm_email: "",
password: "",
secureEntry: true,
showTerms : false,
showPrivacy : false,
errors : [],
termsAccepted : false,
buttonActive : false,
visible: false,
showError: false,
}
this.register = this.register.bind(this);
}
onBlur = () => {
var { full_name, email, confirm_email, password, termsAccepted} = this.state;
var a = full_name.length > 0 && email.length >0 && confirm_email && password.length >0 && termsAccepted
this.setState({buttonActive: a})
}
OnPressSignin = () => {
this.props.navigation.navigate('Signin');
this.setState({
full_name: "",
email: "",
confirm_email: "",
password: "",
secureEntry: true,
showTerms : false,
showPrivacy : false,
errors : [],
termsAccepted : false,
buttonActive : false,
visible: false,
showError: false,
})
}
onPressBackbutton = ()=>{
this.props.navigation.goBack();
this.setState({
full_name: "",
email: "",
confirm_email: "",
password: "",
secureEntry: true,
showTerms : false,
showPrivacy : false,
errors : [],
termsAccepted : false,
buttonActive : false,
visible: false,
showError: false,
})
}
onEndEditing = () => {
this.setState({
showError: !this.state.showError
})
}
async componentDidMount() {}
// Check if the input matches the regex requirements or not
validateInput = () => {
var errorArray = [];
this.setState({errors:[]});
var { full_name, email, confirm_email, password} = this.state;
//validate emty field value
var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[=+\-^$*.\[\]{}()?"!@#%&/\\,><':;|_~`])\S{8,99}$/;
if(full_name.length == 0 && email.length ==0 && confirm_email.length ==0 && password.length ==0 && !this.state.termsAccepted){
errorArray = [...errorArray, 'Attention! Please fill in your Name.']
}else{
if(full_name.length == 0){
errorArray = [...errorArray, 'Attention! Please fill in your Name.']
}
else if(email.length ==0 && confirm_email.length ==0){
console.log("1");
errorArray = [...errorArray, 'Attention! Please fill in your email address.']
} else if(email.length ==0){
console.log("3");
errorArray = [...errorArray, 'Attention! Please fill in your email address.']
} else if(!emailRegex.test(email)){
console.log("4");
errorArray = [...errorArray, 'Attention! Please fill in valid email address.']
} else if(email != confirm_email){
console.log("5");
errorArray = [...errorArray, 'Attention! Email and confirm email does not match.']
}
else if(password.length ==0){
console.log("6");
errorArray = [...errorArray, 'Attention! Please fill in Password.']
}else if(!passwordRegex.test(password)){
console.log("7");
errorArray = [...errorArray, 'Attention! Please fill valid Password.']
}
else if(!this.state.termsAccepted){
console.log("7");
errorArray = [...errorArray, 'Please accept Terms and conditions.']
}
}
console.log("error");
console.log(errorArray);
this.setState({errors: [...errorArray]});
return (errorArray.length <= 0);
}
async register() {
var email = this.state.email;
var password = this.state.password;
var full_name = this.state.full_name;
if(this.state.errors.length > 0 ){
this.setState({
showError: true
})
}
if(this.validateInput()){
try {
console.log(' Sign-up Confirmed '+ email +" "+ password);
await Auth.signUp(
{ username: email,
password: password,
attributes: {
given_name: full_name,
email: email,
'custom:TOU_version': '1.3',
'custom:PP_version': '1.3'
}
});
console.log(' Sign-up Confirmed');
this.props.navigation.navigate('SignupConfirmation',{username: email});
} catch (error) {
console.log(' Error signing up...', error);
this.setState({errors:[error.message]});
}
}
}
<TouchableOpacity style={ this.state.buttonActive ? styles.buttonAddFamilyActive : styles.buttonAddFamily }
onPress={this.register}>
<View style={{justifyContent:'space-between',flexDirection:'row'}}>
<View style = {{flex : 1}}>
<View style={{...styles.ikoncontainer, position:'absolute' , left : 20}}>
</View>
<CText style={{color:'white', textAlign: 'center',fontWeight:'700',fontSize:15}}>{'SUBMIT'}</CText>
</View>
</View>
</View>
);
}
}
```
Here im using Keyboard scrollview, Touchable Opacity