Как передать значения из компонента в мастер многошаговой формы Formik? - PullRequest
Новая
       53

Как передать значения из компонента в мастер многошаговой формы Formik?

0 голосов
/ 02 февраля 2019

Как сказано в названии.У меня есть компонент без сохранения состояния, основанный на react-bootstrap-typeahead, и мастер форм, основанный на примере многошагового мастера formik , найденном в документации.

Однако я не могу передать значения, которые яполучил от typeahead компонента в formik.Я не могу получить доступ к setFieldValue. 

    const FormElements = setFieldValue => (
        <Wizard
          initialValues={FORM_VALUES}
          onSubmit={(values, actions) => {
            sleep(300).then(() => {
              window.alert(JSON.stringify(values, null, 2));
              actions.setSubmitting(false);
            });
          }}
        >
          <Wizard.Page>
            <GoogleMapsPlaceLookup
              value={location => {
                console.log("I got the value correctly from my child: ", location);
              }}
            />
          </Wizard.Page>
        </Wizard>
    );

    export default FormElements;

Как мне вставить это значение в Formik, чтобы оно могло быть обработано onSubmit.Любой указатель или помощь будут оценены.Спасибо

1 Ответ

0 голосов
/ 04 февраля 2019

Автор Formik здесь ...

В этом примере компонент <Wizard /> отображает <Formik>, поэтому setFieldValue в вашей функции FormElements фактически не находится вправильный объемЕсли вам нужен доступ к setFieldValue на одной из страниц вашего мастера, вы можете получить его из пользовательского <Field>, используя connect() компонент более высокого порядка с пользовательским компонентомили непосредственно из контекста Formik, используя <FormikConsumer> пропеллер рендеринга.

Я бы предложил использовать компонент Formik <Field> с опорой рендеринга, например: 

const FormElements = () => (
  <Wizard
    initialValues={FORM_VALUES}
    onSubmit={(values, actions) => {
      sleep(300).then(() => {
        window.alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
      });
    }}
  >
    <Wizard.Page>
      <Field name="location">
        {({ field, form }) => (
          <GoogleMapsPlaceLookup
            value={field.value /* make sure to somehow connect Formik's stored value state to the input */}
            onChange={location => {
              console.log('I got the value correctly from my child: ', location);               
              // Manually set Formik values.location and trigger validation
              form.setFieldValue('location', location);
            }}
          />
        )}
      </Field>
    </Wizard.Page>
  </Wizard>
);
...