Реализация Formik, но не может установить правильное соединение с помощью - PullRequest
Новая
       12

Реализация Formik, но не может установить правильное соединение с помощью

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

Я пытаюсь впервые использовать formik для обработки форм, и мне трудно найти правильный способ сделать это. Структура кода: у меня есть 2 файла, один с фактическими полями ввода и другой файл, который я хочу инициализировать начальными значениями для состояния и где будут выполняться все вызовы обработки и API.

Я буду показать некоторый код.

фактический код формы ввода: 

const CompanyProfileForm = () => (
<div style={inputFieldContainer}>
          <div style={firstInputColumn}>
            <div style={inputContainer}>
              <Nunito20 style={inputLabel}>{COMPANY_FORM_INPUT_NAME}</Nunito20>
              <InputValidation
                type="text"
                name="name"
                value={formfields.name.value}
                handleInputChange={event =>
                  handleInputChange('name', event.target.value)
                }
                hasError={formfields.name.hasError}
                validationMessage={ERROR_REQUIRED}
              />
            </div>

            <div style={inputContainer}>
              <Nunito20 style={inputLabel}>
                {COMPANY_FORM_INPUT_INDUSTRY}
              </Nunito20>
              <InputValidation
                type="text"
                name="industry"
                value={formfields.industry.value}
                handleInputChange={event =>
                  handleInputChange('industry', event.target.value)
                }
                hasError={formfields.industry.hasError}
                validationMessage={ERROR_REQUIRED}
              />
            </div>

            <div style={inputContainer}>
              <Nunito20 style={inputLabel}>
                {COMPANY_FORM_INPUT_ADDRESS}
              </Nunito20>
              <InputValidation
                type="text"
                name="address"
                value={formfields.address.value}
                handleInputChange={event =>
                  handleInputChange('address', event.target.value)
                }
                hasError={formfields.address.hasError}
                validationMessage={ERROR_REQUIRED}
              />
            </div>
            <div style={inputContainer}>
              <Nunito20 style={inputLabel}>
                {COMPANY_FORM_INPUT_CR_NUMBER}
              </Nunito20>
              <InputValidation
                type="number"
                name="crn"
                value={formfields.crn.value}
                handleInputChange={event =>
                  handleInputChange('crn', event.target.value)
                }
                hasError={formfields.crn.hasError}
                validationMessage={ERROR_REQUIRED}
              />
            </div>
          </div>
.....// the rest of the input field

);
export default CompanyProfileForm

файл, который должен содержать logi c: 

const CompanyProfile = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      industry: '',
      address: '',
      crn: '',
      website: '',
      employeesNbr: '',
      phoneNumber: '',
      userRole: '',
      personCheck: false,
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <Skeleton pageTitle={PAGE_TITLE_COMPANY_PROFILE}>
      <CompanyProfileForm />
    </Skeleton>
  );
};
export default CompanyProfile;

Как мне добиться правильного преобразования или соединение, поэтому поля ввода теперь находятся под контролем formik?

1 Ответ

0 голосов
/ 14 апреля 2020
  1. useFormik предположим, что он вызывается в том же компоненте, что и форма, или (что для меня не имеет смысла) вы можете передать экземпляр formik в форму. В вашем коде нет способа получить доступ к экземпляру formik в вашем CompanyProfileForm
  2. . Мне кажется, вы не читали документы, но пошли прямо сюда, чтобы написать вопрос, который вам не следует делать. .
  3. https://jaredpalmer.com/formik/docs/api/useFormik#example - в нем четко показано, как использовать Formik:

Инициализация: 

 const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

Подключение к форме: <form onSubmit={formik.handleSubmit}>

Подключение к полям: 

<input
        id="lastName"
        name="lastName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.lastName}
      />
...