React Native Redux - 添加动态属性到按钮的 TextBox OnClick

Question

我在我的 React Native 应用程序中使用了 native base。我还使用了 React redux。下面是我的屏幕文件的代码

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

下面是我的 reducers/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 textbox in native base

如何设置 emailError 和 passwordError 的值？目前它只显示 emailError 或 passwordError 的错误，我想检查两者。

Answer 1

您可以像这样设置 Item 的 error 道具：

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

在您的构造函数中，将 emailError 保持为 false。然后，当您在 handleSubmit 中检查电子邮件地址是否有效时，如果您想启用这样的错误，可以将其设置为 true：

this.setState({ emailError: true });

更新：

我没有任何使用 Redux 的经验，所以我可能无法在这里为您提供最佳解决方案。但是，在你的 reducer 中的 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
    }
  }

同样，我不确定 if/how 大部分内容是否正确，但它至少可以给你一个想法。

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
        }
      }

您的代码应该 return 包括电子邮件和密码。

 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
        }

此代码尚未执行，但肯定会起作用。

React Native Redux - 添加动态属性到按钮的 TextBox OnClick

React Native Redux - Add dynamic property to TextBox OnClick of button

react-native

native-base

React Native Redux - 添加动态 属性 到按钮的 TextBox OnClick

React Native Redux - Add dynamic property to TextBox OnClick of button

react-native

native-base

React Native Redux - 添加动态属性到按钮的 TextBox OnClick