Блог

У меня есть 2 поля. Второе поле должно быть автоматически заполнено после подтверждения ввода первого поля. Чтобы заполнить второе поле, мне нужно получить доступ к вспомогательным методам formik, которые у нас обычно есть внутри <Field> .

Часть кода, связанная с formik:

 const validateRoutingNumber = (value: string) => {
  // props.form.setFieldValue('financialInstitution', 'ANYTHING'); <---- Can do something like this?
  return;
}

<Formik initialValues={initialValues} validationSchema={Schema} validateOnMount onSubmit={submitForm}>
   <Form>  
    <Field name="routingNumber" validate={validateRoutingNumber}>
      {(props: FieldProps) => (
        <TextField
          variant="outlined"
          {...props.field}
          {...textErrors(props.meta)}
          type="text"
          inputProps={{'aria-label': t('routingNumber')}}
        />
      )}
    </Field>
 

Есть ли способ получить доступ к props inside <Field> , как мы делаем внутри <TextField> ?

Я обнаружил, что могу получить доступ к нужным свойствам formik. Аналогично тому, как предоставляется доступ к свойствам formik на <TextField> уровне, доступ может быть предоставлен <Formik> level с использованием технологии render props.

Часть кода для обеспечения желаемого поведения:

 const validateRoutingNumber = async (value: string, formikProps: FormikProps<any>) => {
  console.log('formikProps', formikProps);
  ....
}

<Formik initialValues={initialValues} validationSchema={Schema} validateOnMount onSubmit={submitForm}>
  {(formikProps: FormikProps<any>) => (
    <Form>  
      <Field name="routingNumber" validate={(value: string) => validateRoutingNumber(value, formikProps)}>
        {(props: FieldProps) => (
        <TextField
 

На YouTube есть хорошие видеоматериалы, касающиеся использования formik — https://www.youtube.com/watch?v=0TFIBPyitXo