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

Question

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

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) ),
  };
};

ниже мой код для редукторов /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, я хочу проверить оба.

Answer 1

Вы можете установить 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
    }
  }

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

Answer 2

 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
        }

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