React Native - Formik Как обрабатывать отправку форм снаружи - PullRequest
Новая
       4

React Native - Formik Как обрабатывать отправку форм снаружи

0 голосов
/ 10 февраля 2020

Я использую Formik в проекте React Native для обработки формы входа. Поэтому я разделил код на два компонента: LoginForm. js (где используется Formik) и Login. js (при визуализации пользовательского интерфейса входа в систему используется LoginForm. js)

Когда я нажимаю на кнопку Login Кнопка внутри Login. js, она должна отправить форму в LoginForm. js (которая в настоящее время работает, используя ответ здесь: { ссылка })

Проблема теперь Я хотел бы убедиться, что onSubmit завершен, прежде чем использовать значения внутри формы для входа в систему.

Вот мои компоненты:

Логин. js

export default class Login extends React.Component {
  submitForm = null 

  // Method to bind this.submitForm with LoginForm Formik's submitForm
  bindSubmitForm = submitForm => {
    this.submitForm = submitForm
  }

  onLoginPressHandler = e => {
    if (this.submitForm) {
      this.submitForm(e)

      // Should login using form values here AFTER submitForm finished
    }
  }

  render() {
    return (
      <SafeAreaView style={globalStyles.safeAreaContainer}>
        <ScrollView
          scrollEnabled={false}
          contentContainerStyle={styles.scrollViewContent}>
          <View style={{ ...globalStyles.container, ...styles.loginView }}>
            <LoginForm bindSubmitForm={this.bindSubmitForm} />
            <View style={styles.actionButtonsContainer}>
              <BlockButton
                text="LOGIN"
                onPress={this.onLoginPressHandler}
                buttonStyle={styles.loginButton}
              />
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    )
  }
}

LoginForm. js

export default class LoginForm extends React.Component {
  validationSchema = yup.object().shape({
    username: yup
      .string()
      .required()
      .label("User Name"),
    password: yup
      .string()
      .required()
      .label("Password")
  })    

  render() {
    const { bindSubmitForm } = this.props   

    return (
      <View style={{ ...globalStyles.container, ...styles.container }}>
        <Formik
          initialValues={{ username: "", password: "" }}
          validationSchema={this.validationSchema}
          onSubmit={(values, { setSubmitting }) => {
            console.log("Login Form Submitted")
            alert(JSON.stringify(values))
            setSubmitting(false)
          }}>
          {formikProps => {
            bindSubmitForm(formikProps.submitForm)
            return (
              <View>
                <FormikTextField
                  placeholder={"Username"}
                  formikProps={formikProps}
                  formikKey={"username"}
                />
                <FormikTextField
                  placeholder={"Password"}
                  formikProps={formikProps}
                  formikKey={"password"}
                  secureTextEntry={true}
                />
              </View>
            )
          }}
        </Formik>
      </View>
    )
  }
}

Вопрос : Как мне ждать, пока Formik onSubmit, прежде чем использовать значения формы для входа в систему?

...