Функция handleSubmit не запускается с использованием Formik

Я использую Formik + Yup для создания формы, но не могу решить основную проблему, мне кажется, что я упускаю что-то очевидное. Моя функция handleSubmit не срабатывает при нажатии кнопки - даже что-то простое, например, журнал консоли. Если я добавлю чистую функцию в обработчик кнопки onClick, он сработает, но Formik, похоже, не передает мой handleSubmit, созданный с помощью withFormik HOC.

Я пробовал добавить обработчик в компонент Form, там тоже не работает.

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    firstName: props.firstName || '',
    ...
  }),
  validationSchema: yup.object().shape({
    firstName: yup.string().required('Please enter your first name'),
   ...
  }),
  handleSubmit: (values, formikBag) => {
    console.log('test');
    }
  },
});

const BusinessFundingForm = ({
  values,
  isSubmitting,
  errors,
  handleBlur,
  handleChange,
  handleSubmit,
  touched,
  data,
}) => {

  return (
        <Form className="form" id="form-id">
          <Row>
            <Col xs={12} sm={6}>
              <InputField
                id="first-name"
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="First Name"
                label="First Name"
              />
              {errors.firstName &&
                touched.firstName && <Error>{errors.firstName}</Error>}
            </Col>
           ...
          </Row>

          <Row>
            <ButtonWrapper>
              <Button
                type="submit"
                tall
                onClick={handleSubmit}
                varianttype={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                    ? 'disabled'
                    : 'outline'
                }
                disabled={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                }
                text="Submit →"
              />
            </ButtonWrapper>
          </Row>
        </Form>
      </FormGrid>
    </Element>
  );
};

export default formikEnhancer(BusinessFundingForm);

Для краткости я удалил все свойства, кроме свойства firstName.


person geeberry    schedule 30.05.2019    source источник
comment
иногда на странице есть errors, которые не позволяют Formik запускать handleSubmit, поэтому полезно проверить, нет ли ошибок, выведя errors на экран или консоль. Также я надеюсь, что в вашем коде нет синтаксических ошибок, потому что ваш handleSubmit, кажется, имеет лишнюю закрывающую скобку.   -  person Rikin    schedule 30.05.2019
comment
@Vencovsky formikEnhancer - это пользовательская функция OP, которая использует withFormik   -  person Rikin    schedule 30.05.2019
comment
@Rikin ops, моя ошибка   -  person Vencovsky    schedule 30.05.2019
comment
@Rikin О, чувак, спасибо тебе большое. Я зарегистрировал ошибки и понял, что проверяю на наличие ошибок поле, которого нет в форме. Думаю, об опасностях копирования / вставки. Спасибо еще раз!   -  person geeberry    schedule 30.05.2019
comment
@geeberry Я отправлю это в качестве ответа для будущих читателей, поскольку это очень распространенная проблема, которую нужно решить, вы можете принять, если хотите.   -  person Rikin    schedule 30.05.2019


Ответы (1)


Иногда на странице есть ошибки, которые не позволяют Formik запускать handleSubmit, поэтому полезно проверить, нет ли ошибок, путем вывода ошибок на экран или консоль.

Чтобы преодолеть эти типы сценариев во время разработки, вы всегда можете использовать: <pre>{JSON.stringify(errors, null, 2)}</pre> в качестве узла DOM, чтобы вы постоянно знали о проблеме в пользовательском интерфейсе, а затем удалили или прокомментировали ее во время фиксации в своей ветке.

Также я надеюсь, что в вашем коде нет синтаксических ошибок, потому что ваш handleSubmit, кажется, имеет лишнюю закрывающую скобку.

person Rikin    schedule 30.05.2019