Formik 两种形式之间的错误初始值

Question

我在 react native 中使用 formik 和 yup 来创建一个简单的登录屏幕。我有 2 个表单登录和注册，其中一个是根据 redux 状态呈现的。

当我在表单之间切换（不接触表单）初始值没有改变时，问题就开始了。前任。我在 LoginForm 然后切换到 RegisterForm，注册表保持 { email: '', password: '' } 和 loginform 中的值，这是错误的注册表应该得到 { 名： ''， 姓： ''， 注册邮件： ''， 注册密码：''， 接受TOC：假 } .

LoginForm 道具

切换后RegisterForm Props

我正在渲染这样的表单

<View style={styles.section}>
              {this.props.session.loginForm ? loginFormFormik() : registerForm()}
            </View>

登录表格

const loginFormFormik = () => {
      return (
        <Formik
          enableReinitialize={true}
          initialValues={{ email: '', password: '' }}
          onSubmit={this.onLogInPress}
          validationSchema={this.validationSchemaLogin}>
          {(formikProps) => {
            console.log('TCL: loginFormFormik -> formikProps', formikProps);
            const { handleSubmit } = formikProps;

            return (
              <View>
                <View style={[styles.section, styles.sectionStart, styles.loginForm]}>
                  <InputFormik
                    formikKey="email"
                    formikProps={formikProps}
                    placeholder="Type your account number or email"
                    label="Username"
                    keyboardType="email-address"
                    autoCapitalize="none"
                    autoCorrect={false}
                    returnKeyType="next"
                    onSubmitEditing={() => {
                      this.loginFormPasswordRef.focus();
                    }}
                  />
                  <InputFormik
                    formikKey="password"
                    formikProps={formikProps}
                    ref={(child) => {
                      if (child) {
                        this.loginFormPasswordRef = child.refProp;
                      }
                    }}
                    placeholder="Type your password"
                    label="Password"
                    secureTextEntry={this.state.showPassword}
                    returnKeyType="go"
                    containerStyle={inputContainer}
                    rightIcon={toggleViewIcon}
                  />
                  <ServerError message={this.props.session.loginError} />
                  <TouchableHighlight
                    onPress={() => this.props.navigation.navigate('ResetPassword')}
                    underlayColor={'transparent'}
                    style={styles.forgotPasswordLinkWrapper}>
                    <Text style={styles.forgotPasswordLink}>Forgot Password</Text>
                  </TouchableHighlight>
                </View>
                <View style={[styles.section, styles.sectionEnd]}>
                  <SubmitButton handleSubmit={handleSubmit} />
                  {formSwitchLink()}
                </View>
              </View>
            );
          }}
        </Formik>
      );
    };

报名表

const registerForm = () => {
      return (
        <Formik
          enableReinitialize={true}
          initialValues={{
            firstName: '',
            surName: '',
            registerEmail: '',
            registerPassword: '',
            acceptTOC: false
          }}
          onSubmit={this.onRegisterPress}
          validationSchema={this.validationSchemaRegister}>
          {(formikProps) => {
            console.log('TCL: registerForm -> formikProps', formikProps);
            const { handleSubmit } = formikProps;
            return (
              <View>
                <View style={[styles.section, styles.sectionStart]}>
                  <InputFormik
                    formikKey="firstName"
                    formikProps={formikProps}
                    placeholder="Type your first name"
                    label="First name"
                    keyboardType="default"
                    autoCapitalize="words"
                    autoCorrect={false}
                    returnKeyType="next"
                    onSubmitEditing={() => {
                      this.registerFormSurNameRef.focus();
                    }}
                  />

                  <InputFormik
                    formikKey="surName"
                    formikProps={formikProps}
                    ref={(child) => {
                      if (child) {
                        this.registerFormSurNameRef = child.refProp;
                      }
                    }}
                    placeholder="Type your surname"
                    label="Surname"
                    keyboardType="default"
                    autoCapitalize="words"
                    autoCorrect={false}
                    returnKeyType="next"
                    onSubmitEditing={() => {
                      this.registerFormEmailRef.focus();
                    }}
                  />
                  <InputFormik
                    formikKey="registerEmail"
                    formikProps={formikProps}
                    ref={(child) => {
                      if (child) {
                        this.registerFormEmailRef = child.refProp;
                      }
                    }}
                    placeholder="Type your e-mail address"
                    label="E-mail"
                    keyboardType="email-address"
                    autoCapitalize="none"
                    autoCorrect={false}
                    returnKeyType="next"
                    onSubmitEditing={() => {
                      this.registerFormPasswordRef.focus();
                    }}
                  />
                  <InputFormik
                    formikKey="registerPassword"
                    formikProps={formikProps}
                    ref={(child) => {
                      if (child) {
                        this.registerFormPasswordRef = child.refProp;
                      }
                    }}
                    placeholder="Type your new password"
                    label="Password"
                    secureTextEntry={this.state.showPassword}
                    returnKeyType="go"
                    rightIcon={toggleViewIcon}
                    pwdStrength={true}
                  />
                  <SwitchFormik
                    label={'Accept Terms & Conditions to use this service.'}
                    accessibilityLabel="Please accept these terms and conditions"
                    formikKey="acceptTOC"
                    formikProps={formikProps}
                    errorStyle={errorText}
                  />
                </View>
                <ServerError message={this.props.session.registrationError} />
                <View style={[styles.section, styles.sectionEnd]}>
                  <SubmitButton handleSubmit={handleSubmit} />
                  {formSwitchLink()}
                </View>
              </View>
            );
          }}
        </Formik>
      );
    };

输入格式

class InputFormik extends React.Component {
  constructor(props) {
    super(props);
    this.refProp = React.createRef();
  }
  render() {
    const { formikKey, formikProps, pwdStrength, ...rest } = this.props;
    const errorMessage = formikProps.errors[formikKey];
    const haveErrors =
      formikProps.errors[formikKey] && (formikProps.touched[formikKey] || formikProps.isSubmitting);
    return (
      <Input
        ref={(inputRef) => (this.refProp = inputRef)}
        onChangeText={formikProps.handleChange(formikKey)}
        onBlur={formikProps.handleBlur(formikKey)}
        placeholderTextColor={config.ThemeColors.text.label}
        labelStyle={controlLabel.normal}
        value={formikProps.values[formikKey]}
        errorMessage={haveErrors ? errorMessage : null}
        errorProps={{ accessibilityLiveRegion: 'polite' }}
        errorStyle={errorText}
        inputStyle={haveErrors ? textbox.error : textbox.normal}
        inputContainerStyle={haveErrors ? textbox.containerError : null}
        containerStyle={inputContainer}
        {...rest}
      />
    );
  }
}
export default InputFormik;

Answer 1

我认为这里的根本原因可能是您将 loginFormFormik / registerForm 作为函数“调用”，而不是将它们呈现为组件。这意味着 React 将每个函数返回的 Formik 组件视为相同的组件。

如果您“渲染”组件，它应该单独对待它们，因此在 this.props.session.loginForm 切换时创建对组件的新引用，然后使用新的初始值重新安装。

<View style={styles.section}>
    {this.props.session.loginForm ? <loginFormFormik /> : <registerForm />}
</View>