如何将组件中的值传递到 Formik 多步骤表单向导中？

IT技术 reactjs formik react-bootstrap-typeahead
2021-03-24 04:00:30

正如标题所说。我有一个基于文档中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个回答

Formik 作者在这里...

在示例中，<Wizard />组件呈现，<Formik>因此setFieldValue在您的FormElements函数中实际上不在正确的范围内。如果您需要访问setFieldValue您的向导页面之一，您可以<Field>使用connect()带有自定义组件的高阶组件，或使用<FormikConsumer>render prop直接从 Formik 上下文中获取它。

我的建议是将 Formik 的<Field>组件与渲染props一起使用，如下所示：

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的文档中？在网上搜索，我发现了很多与此类似的悬而未决的问题。
2021-06-16 04:00:30
其它你可能感兴趣的问题
上一篇如何在 React Admin 包中显示来自服务器端验证的自定义错误消息？ 下一篇React 应用程序在本地运行，在 Heroku 上时崩溃错误代码 = H10