我不明白哪里出错了？如何让它在第一次点击时起作用？为什么我必须单击两次才能在反应中触发事件？ 如果我第一次点击，它不会做任何事情。它仅在第二次单击后提交表单。为什么会这样？如果有人能帮我解决这个问题并告诉我哪里出了问题？
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