Question

我在自己的本机应用程序中使用了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

您可以这样设置error的{{1}}属性：

Item

在构造函数中，将<Item error={this.state.emailError}> <Input placeholder='Email' autoCapitalize="none" onChangeText={this.props.changeEmailValue} /> </Item>保留为emailError。然后，当您在false中检查电子邮件地址是否有效时，如果要启用以下错误，可以将其设置为true：

handleSubmit

更新：

我对Redux没有任何经验，因此我可能无法在此为您提供最佳解决方案。但是，在化简器中的this.setState({ emailError: true });下，仅case LOGIN:块之一将运行，这就是为什么这里仅捕获一种错误的原因。您可以尝试以下方法：

if-else

同样，我不确定这是否正确/多少正确，但这至少可以给您一个想法。

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
        }

此代码尚未执行，但可以正常工作。

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

2 个答案: