Не удалось получить доступ к handleSubmit из formik - PullRequest
Новая
       4

Не удалось получить доступ к handleSubmit из formik

0 голосов
/ 15 апреля 2020

Мне трудно получить доступ к handleSubmit из useFormik. Я добавил в функцию console.log и не могу получить к нему доступ.

Вот мой код 

const CompanyProfile = () => {
  const CompanySchema = Yup.object().shape({
    name: Yup.string()
      .min(2, 'too short')
      .required(ERROR_REQUIRED),
    industry: Yup.string().notRequired(),
    address: Yup.string().notRequired(),
    crn: Yup.number().required(ERROR_REQUIRED),
    website: Yup.string()
      .notRequired()
      .min(2, 'too short'),
    employeesNbr: Yup.string().required(ERROR_REQUIRED),
    phoneNumber: Yup.string().notRequired(),

    userRole: Yup.string().required(ERROR_REQUIRED),
    personCheck: Yup.boolean().required(ERROR_REQUIRED),
  });

  const registerCompany = async values => {
    try {
      const data = values;
      delete data.personCheck;
      await addCompany(data);
    } catch (error) {
      console.log(error);
    }
  };

  // const handleSubmit = values => {
  //   if (formik.isValid) {
  //     registerCompany(values);
  //   }
  // };

  const formik = useFormik({
    initialTouched: false,
    validateOnChange: true,
    validateOnBlur: true,
    initialValues: {
      name: '',
      industry: '',
      address: '',
      crn: '',
      website: '',
      employeesNbr: '',
      phoneNumber: '',
      userRole: '',
      personCheck: false,
    },

    validationSchema: CompanySchema,
    onSubmit: values => {
      console.log(values);
    },

    handleSubmit: (values, formikBag) => {
      console.log('handling submit');
    },
    isInitialValid: false,
  });

  return (
    <Skeleton pageTitle={PAGE_TITLE_COMPANY_PROFILE}>
      <CompanyProfileForm formik={formik} />
    </Skeleton>
  );
};
export default CompanyProfile;

код 

<InputValidation
                type="text"
                name="userRole"
                value={formik.values.userRole}
                handleInputChange={formik.handleChange}
                hasError={formik.errors.userRole && formik.touched.userRole}
                validationMessage={
                  formik.errors.userRole
                    ? formik.errors.userRole
                    : ERROR_REQUIRED
                }
                onBlur={formik.handleBlur}
              />
            </div>
          </div>
        </div>
        <div style={tickBoxContainer}>
          <div style={checkBoxDiv}>
            <Checkbox handleChange={formik.handleChange} name="personCheck" />
            <NunitoBold18 style={checkBoxLabel}>{PERSON_CHECK}</NunitoBold18>
          </div>
        </div>
      </div>
      <SubmitButton style={submitButton} onClick={formik.handleSubmit}>
        {CONTINUE}
      </SubmitButton>
    </div>

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

pls help

...