React Formik - Форма подтверждения при повторном монтировании компонента и кнопка включения - PullRequest
Новая
       4

React Formik - Форма подтверждения при повторном монтировании компонента и кнопка включения

2 голосов
/ 08 мая 2020

Я пишу приложение React и использую Formik и Yup для форм. Страница, с которой у меня возникли проблемы, представляет собой страницу в стиле мастера, которая отображает форму Form1 при загрузке страницы с кнопкой «Далее». Нажатие «Далее» отображает Form2, а вместе с Form2 появляются кнопки «Назад» и «Далее», которые перемещают вас по мастеру.

Проблема заключается в использовании кнопки «Назад». После того, как я завершу заполнение sh формы 1, кнопка «Далее» станет активной, и я могу перейти к следующей форме. Когда я использую Form2, я хочу иметь возможность go вернуться к Form1 и нажать кнопку «Назад». Он правильно загружает значения в форму при повторной визуализации Formik, но не проверяет форму, и поэтому кнопка «Далее» неактивна, даже если данные действительны. Мне пришлось бы вызвать событие изменения в одном из полей, чтобы активировалась кнопка «Далее».

В этой ситуации кнопка «Далее» должна быть активирована при повторной визуализации формы. Я просмотрел документацию и попробовал опору validateOnMount в Formik, которая, судя по его названию, должна работать. Документы рекомендуют использовать initialErrors, но я не понимаю, как это использовать. Проблема также может заключаться в том, как я включаю / отключаю кнопку «Далее».

Это сводит меня с ума часами, и это последнее, что нужно sh на этой странице в пятницу днем. 

<Formik
     enableReinitialize
     validationSchema={validationSchema}
     initialValues={initialValues}
     validateOnMount
     render={({ isValid, values, isSubmitting, handleChange, setFieldValue, setFieldTouched }) => (
         <Form className="text-center">
            <FieldRow labelName="What's your address? (Can't be a PO Box)">
                <AddressField
                   id="address"
                   name="address"
                   data-testid="address"
                   onChange={handleChange}
                   onBlur={setFieldTouched}
                   values={values}
                   setFieldValue={setFieldValue}
                   validateForm={validateForm}
                /> </FieldRow>
               <div className="mt-5">
                  <Button
                    data-testid="submit-next"
                    color="primary"
                    onClick={() => handleNext(values)}
                    className="float-right"
                    disabled={isValid === false || isSubmitting}
                 >
                    {isSubmitting ? <Spinner /> : 'Next'}
                 </Button>
                 <Button
                    data-testid="submit-back"
                    color="light"
                    onClick={() => handleBack()}
                    className="float-left"
                    disabled={true}
                  >
                    Back
                  </Button>
              </div>
          </Form>
      )}
/>

1 Ответ

1 голос
/ 08 мая 2020

Причина, по которой это не работает, заключается в том, что при первом go переходе на эту страницу компонент Formik монтируется и отображается. Затем, когда вы нажимаете кнопку «Далее» или «Назад», он не монтируется снова, он просто обновляется, поэтому он больше не запускает проверку.

Если у вас есть кнопки «Назад» и «Далее», я предполагаю, что вы используете их для увеличения index или step переменная / состояние. Что вы можете сделать, так это вручную запустить вызов проверки validateForm() из useEffect, который имеет состояние step как deps: 

<Formik
  enableReinitialize
  validationSchema={ validationSchema }
  initialValues={ initialValues }
  validateOnMount
  render={({
    isValid,
    values,
    isSubmitting,
    handleChange,
    setFieldValue,
    setFieldTouched,
    validateForm,
  }) => {
    useEffect(() => {
      // This will be called everytime `step` changes:
      validateForm();
    }, [step]);

    return (<Form ...>...</Form>)
  }}
/>

В качестве альтернативы вы можете попробовать использовать initialErrors, но это может вызвать проверку, когда на самом деле в этом нет необходимости, если есть что-то еще, кроме step, которое может вызвать повторную визуализацию: 

<Formik
  initialErrors={ validationSchema.isValidSync(initialData) }
  ...
/>

Кроме того, похоже, что в настоящее время открыта связанная ошибка, и предлагаемое временное исправление также использует useEffect, поэтому даже если вы go для initialErrors, вам все равно может потребоваться добавить useEffect, пока проблема не будет устранена:

https://github.com/jaredpalmer/formik/issues/1950

...