Question

我写了一个LoginForm组件。由于我集成了验证器来检查电子邮件和内容的长度，因此该组件不再显示。要么该组件未显示，要么我收到此错误消息。我卡住了。

我提供了我收到的错误消息的屏幕截图。任何人都知道可能是什么问题？

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);
}
onPasswordChange(text){
 this.props.passwordChanged(text);
}
onChange(event){
 this.setState({ [event.target.name]: event.target.value });
}
onButtonPress(){
 //Actions.Start();
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>{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>
)
}
}



onRender(validation){


  <Card>

    <CardSection>
      <Input
        label="Email"
        placeholder="email@gmail.com"
        onChangeText={this.onEmailChange.bind(this)}
        value={this.props.email}
      />
    </CardSection>
    <Text>
    {this.renderValidationError(validation.email)}
    </Text>
    <CardSection>
      <Input
        secret={true}
        label="Passwort"
        placeholder="password"
        onChangeText={this.onPasswordChange.bind(this)}
        value={this.props.password}
      />
    </CardSection>
    <Text>
    {this.renderValidationError(validation.password)}
    </Text>
    //{this.renderError()}

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

}

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

  {this.onRender(validation)}

)
}
}

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

const mapDispatchToProps= dispatch=>{
  return{
   apiPostLogin:(accountData)=>
   dispatch(apiPostLogin(accountData))
};
};



export default connect(mapStateToProps,{ apiPostLogin,
emailChanged,passwordChanged})(LoginFormNative);

React Native Component不会显示

0 个答案: