React Native Redux - добавить динамическое свойство в TextBox OnClick кнопки - PullRequest
Новая
       39

React Native Redux - добавить динамическое свойство в TextBox OnClick кнопки

0 голосов
/ 25 октября 2018

Я использовал нативную базу в моем собственном приложении.Я также использовал реагировать редуксом.ниже приведен код моего экранного файла 

handleSubmit = () => {
  // Add Logic here for adding error if email or password is empty
   //this.props.login(this.props.email, this.props.password)

}
<Item error={this.props.emailError}>
  <Input  placeholder='Email'
          autoCapitalize="none" 
          onChangeText={this.props.changeEmailValue}/>
</Item>
<Item error={this.props.passwordError}>
  <Input  placeholder='Password'
          autoCapitalize="none" 
          onChangeText={this.props.changePasswordValue}
          secureTextEntry />
</Item>        
<LoginButton title="Login"  onPress={this.handleSubmit}/>
...
...
const mapStateToProps = (state) => {
  return {
    email: state.user.email,
    password: state.user.password,
    isAuthenticated: state.user.isAuthenticated,
    emailError: state.user.emailError,
    passwordError: state.user.passwordError,
    loginError: state.user.error
  }
}

const mapDispatchToProps = dispatch => {
  return {
      changeEmailValue: (email) => dispatch(handleEmailChange(email)),
      changePasswordValue: (password) => dispatch( handlePasswordChange(password)),
      login: (email,password) => dispatch( login( email, password) ),
  };
};

ниже приведен мой код для Redurs / user.js 

 case LOGIN: 
      if(action.payload.email === '' || action.payload.email === undefined){
        return {
          ...state,
          emailError: true
        }
      }
      else if (action.payload.password === '' || action.payload.password === undefined){
        return {
          ...state,
          passwordError: true
        }
      }
      else {
        return {
          ...state,
          email: action.payload.email,
          password: action.payload.password
        }
      }

На простом экране входа в систему, если текстовое поле пусто, то мне нужно добавитьсвойство "error" для этого Input TextBox.Вы можете проверить здесь на текстовое поле ошибки в собственной базе

Как я могу установить значение для emailError и passwordError?В настоящее время он показывает ошибку только для emailError или passwordError, я хочу проверить оба.

Ответы [ 2 ]

0 голосов
/ 25 октября 2018 
 case LOGIN: 
      if(action.payload.email === '' || action.payload.email === undefined){

     ***`You are returning here when email blank`***

    return { 
          ...state,
          emailError: true
        }
      }
      else if (action.payload.password === '' || action.payload.password === undefined){
        return {
          ...state,
          passwordError: true
        }
      }
      else {
        return {
          ...state,
          email: action.payload.email,
          password: action.payload.password
        }
      }

Ваш код должен возвращаться, включая адрес электронной почты и пароль. 

 case LOGIN: 
      let eError = false;
      let pError = false;
      if(action.payload.email === '' || action.payload.email === undefined){
         eError = true
      }
      else if (action.payload.password === '' || action.payload.password === undefined){
          pError = true
      }
      else {
        pError = false;
        pError = false;
      }
   return {
          ...state,
          emailError: eError,
          passwordError: pError,
          email: action.payload.email,
          password: action.payload.password
        }

Этот код не был выполнен, но обязательно будет работать.

0 голосов
/ 25 октября 2018

Вы можете установить error опору Item следующим образом: 

<Item error={this.state.emailError}>
  <Input placeholder='Email'
         autoCapitalize="none" 
         onChangeText={this.props.changeEmailValue}
  />
</Item>

В конструкторе оставьте emailError как false.Затем, когда вы проверяете, является ли адрес электронной почты действительным или нет в handleSubmit, вы можете установить его в значение true, если хотите разрешить ошибку следующим образом: 

this.setState({ emailError: true });

ОБНОВЛЕНИЕ:

У меня нет опыта работы с Redux, поэтому я не смогу дать вам лучшее решение здесь.Однако в case LOGIN: вашего редуктора будет работать только один из блоков if-else, поэтому здесь будет обнаружен только один тип ошибок.Вы можете попробовать что-то вроде: 

case LOGIN:

  let emailError = false;
  let passwordError = false;

  if (action.payload.email === '' || action.payload.email === undefined)
    emailError = true

  if (action.payload.password === '' || action.payload.password === undefined)
    passwordError = true

  if ( emailError || passwordError ) {
    return {
      ...state,
      emailError: emailError,
      passwordError: passwordError
    }
  }
  else {
    return {
      ...state,
      email: action.payload.email,
      password: action.payload.password
    }
  }

Опять же, я не уверен, что / насколько это правильно, но это может, по крайней мере, дать вам представление.

...