Formik потерял поля при срабатывании модального подтверждения - PullRequest
Новая
       4

Formik потерял поля при срабатывании модального подтверждения

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

У меня есть форма, использующая библиотеку Formik, все в порядке, но когда я хочу подтвердить и отправить, мне нужно сначала пройти модал, проблема в том, что когда я запускаю модал подтверждения, все данные, которые я помещаю в форму, удаляются и ничего не посылают, я заметил, что когда я запускаю модальный, тег формы загружается, а затем теряет данные, у кого-то есть такая же проблема? o что-то, чтобы предотвратить загрузку тега формы при изменении состояния модального режима?

, вот часть моего кода, я использую CSSTransition на модальном, который монтирует и размонтирует компонент, и я вызываю предыдущий поля в форме, используя FieldArray

<Formik
  enableReinitialize
  initialValues={INITIAL_VALUES}
  onSubmit={(values) => {
    this.props.onSubmitForm(values.rows);
  }}
>
  {({ values, errors, touched, isValid }) => (
    <Form>
      <Title />
      <div className="wrapper__brick wrapper__brick--to-up">
        <FieldArray
          name="rows"
          render={({ push }) => (
            <>
              <div className="wrapper__block">
                <div className="master-table">
                  <FieldArray
                    name="rows"
                    render={({ remove }) => (
                      <div className="master-table__container">
                        {values.rows.length > 0 &&
                          values.rows.map((rows, index) => (
                            <div
                              className="master-table__row"
                              key={index}
                            >
                              <div className="master-table__item">
                                <Field
                                  className={errors.rows && errors.rows[index] && touched.rows && touched.rows[index] ?
                                    'input input--empty is-danger'
                                    :
                                    'input input--empty'
                                  }
                                  name={`rows.${index}.name`}
                                  placeholder="Name"
                                  type="text"
                                  validate={validateName}
                                />
                                <ErrorMessage
                                  name={`rows.${index}.name`}
                                  component="p"
                                  className="help is-danger"
                                />
                              </div>
                              <div className="master-table__item">
                                <div className={rows.default ? 'select select--disabled' : 'select select--empty'}>
                                  <Field
                                    as="select"
                                    disabled={rows.default}
                                    name={`rows.${index}.kind`}
                                  >
                                    {this.allowedKinds.map((row) => (
                                      <option
                                        value={row.internal}
                                        key={row.internal}
                                      >
                                        {row.name}
                                      </option>
                                    ))}
                                  </Field>
                                </div>
                              </div>
                              <div className="master-table__item">
                                <button
                                  className="button button--trigger tooltip is-tooltip-right"
                                  data-tooltip={rows.default ? t('common.deleteNotAvailable') : t('common.delete')}
                                  onClick={() => remove(index)}
                                  type="button"
                                  disabled={rows.default}
                                >
                                  <span className="icon">
                                    <i className="far fa-trash-alt" />
                                  </span>
                                </button>
                              </div>
                            </div>
                          ))}
                      </div>
                    )}
                  />
                </div>
              </div>
              <Footer
                onAddRow={() => push({
                  id: UUID.v4(),
                  name: '',
                  kind: 'string',
                  type: 'generic',
                  required: false,
                  default: false
                })}
                validForm={!isValid}
              />
              <TransitionWrapper stateToggle={this.state.openModal}>
                <ModalDialog
                  iconModal="fas fa-info-circle"
                  titleText={t('modals.descriptionContinue')}
                  onCloseMethod={this.handleShowModal}
                  onAcceptMethod={this.props.onSubmitForm}
                />
              </TransitionWrapper>
            </>
          )}
        />
      </div>
    </Form>
  )}
</Formik>
...