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>，因此setFieldValue函数中的FormElements实际上不在正确的范围内。如果您需要在向导的一个页面中访问setFieldValue，则可以将<Field>与自定义组件结合使用，或者直接从Formik上下文中使用自定义connect()使用<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多步骤表单向导？

1 个答案: