如何将值从组件传递到 Formik multi-step 表单向导？

Question

正如标题所说。我有一个基于 react-bootstrap-typeahead 的无状态组件和一个基于文档中 formik multi-step wizard example 的表单向导。

但是，我无法将从 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。任何指针或帮助将不胜感激。谢谢

Answer 1

Formik 作者在这里...

In the example, the <Wizard /> component renders <Formik> so the setFieldValue in your FormElements function is not actually in the correct scope. If you need access to setFieldValue within one of your wizard's pages, you can get it out of a custom <Field>, using connect() higher order component with a custom component, or directly from Formik context using <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>
);

如何将值从组件传递到 Formik multi-step 表单向导？

How to pass values from a component into Formik multi-step form wizard?

reactjs

react-bootstrap-typeahead

formik