Функция handleSubmit не запускается успешно с помощью Formik - PullRequest
Новая
       19

Функция handleSubmit не запускается успешно с помощью Formik

0 голосов
/ 30 мая 2019

Я использую 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

1 Ответ

1 голос
/ 30 мая 2019

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

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

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

...