ReactNative Input теряет фокус при наборе текста - PullRequest
Новая
       35

ReactNative Input теряет фокус при наборе текста

0 голосов
/ 18 ноября 2018

У меня проблема с компонентом входа в систему.Я на самом деле ничего не изменил, но вдруг оказалось, что компонент ввода теряет фокус при наборе текста.Так как я не работал с этим компонентом и связанными с ним действиями / редукторами, я не понимаю, где может быть ошибка.

Он работал ранее.Также с валидатором и тд.Пожалуйста, извините за мой английский.Я не родная;) 

class LoginFormNative extends React.Component{
constructor(props){
super(props);
this.validator = new FormValidator([
{
  field: 'email',
  method: 'isEmpty',
  validWhen: false,
  message: 'Es fehlt eine E-Mail'
},
{
  field: 'email',
  method: 'isEmail',
  validWhen: true,
  message: 'Das ist keine gültige E-Mail'
},
{
  field: 'password',
  method: 'isEmpty',
  validWhen: false,
  message: 'Es fehlt ein Passwort'
},
{
  field: 'password',
  method: 'isLength',
  args: [{ min: 6, max: 20 }],
  validWhen: true,
  message: 'Dein Passwort muss zwischen 6 und 20 Zeichen lang sein'
}
]);
this.submitted=false;
this.state={
  email: '',
  password: '',
  validation: this.validator.valid()
}
}


onEmailChange(text){

this.props.emailChanged(text);
this.setState({email: text});
}
onPasswordChange(text){
this.props.passwordChanged(text);
this.setState({password: text});
}

onButtonPress(){
const validation=this.validator.validate(this.state);
this.setState({validation});
this.submitted=true;
if(validation.isValid){
  this.props.apiPostLogin(
    {
      password: this.props.password,
      email: this.props.email
    }
  )
}

}
renderValidationError(validation){
if(validation.isInvalid){
 return(
   <View>
     <Text styles={styles.errorTextStyle}>{validation.message}</Text>
   </View>
 );
}
}


onButton2Press(){
  Actions.register();

}

renderError(){
  if(true){
   return (
    <View
      style={{backgroundColor: 'white'}}
      >
      <Text style={styles.errorTextStyle}>
        {this.props.error}
      </Text>
    </View>
  )
 }
 }
 renderButton(){
 if(false){
  return <Spinner size="large" />
 }else{
  return (
  <Button onPress={this.onButtonPress.bind(this)}>
    Login
  </Button>
)
}
}
render2Button(){
if(false){
  return <Spinner size="large" />
}else{
  return (
    <Button onPress={this.onButton2Press.bind(this)}>
      Register
    </Button>
  )
}
}



 onRenderValidation = (validation) => {

 return (
   <Card>
     <CardSection>
       <Input
        label="Email"
        placeholder="email@gmail.com"
        onChangeText={this.onEmailChange.bind(this)}
        value={this.props.email}
       />
     </CardSection>

    {this.renderValidationError(validation.email)}

    <CardSection>
      <Input
        secret={true}
        label="Passwort"
        placeholder="password"
        onChangeText={this.onPasswordChange.bind(this)}
        value={this.props.password}
      />
    </CardSection>

    {this.renderValidationError(validation.password)}



    <CardSection>
      {this.renderButton()}
    </CardSection>
    <CardSection>
      {this.render2Button()}
    </CardSection>
  </Card>
  )
 }

 render(){
  let validation=this.submitted ? this.validator.validate(this.state) :   this.state.validation;
  return(

  this.onRenderValidation(validation)

 )
 }
 }

 const styles ={
  errorTextStyle:{
 fontSize:20,
 alignSelf: 'center',
 color: 'red'
 }
 }

 const mapDispatchToProps= dispatch=>{
 return{
   apiPostLogin:(accountData)=>
     dispatch(apiPostLogin(accountData)),
   emailChanged: (text)=>
     dispatch(emailChanged(text)),
   passwordChanged: (text)=>
    dispatch(passwordChanged(text))
  };
 };

 const mapStateToProps = state =>{
  return {
  email: state.account.email,
  password: state.account.password
 };
 };

 export default connect(mapStateToProps,mapDispatchToProps)(LoginFormNative);
...