如何从外部操作更新 Formik Field

Question

我正在尝试从模态屏幕更新 Formik 字段。模态 returns 数据并将它们设置到 pageState 中。考虑到我的 Fomik 表单有 "enableReinitialize"，字段更新工作正常。但是，如果表单处于 "dirty" 状态，这意味着表单中的其他一些字段已更新，则更新字段的过程不再有效。该字段本身是一个只读字段，用户填充数据的唯一方法是单击按钮并从模式中选择数据。

有人知道这个问题的解决方法吗？

反应 16.8.6 福米克 1.5.8

我的表格摘要：

<Formik
        enableReinitialize={true}
        initialValues={props.quoteData}
        validationSchema={QuoteFormSchema}
        onSubmit={values => {
          props.onSubmit(values);
        }}
      >


{({ values, setFieldValue }) => (

<Label for='customerName'>Customer:</Label>
                  <Field
                    type='text'
                    name='customerName'
                    id='customerName'
                    value={values.customerName}
                    onClick={props.showCustomerModal}
                    onChange={e => {
                      setFieldValue('customerName', e.target.value);
                    }}
                    component={customInputFormModal}
                  />

我需要在从模态中选择新数据后立即更新 Formik 字段。不管表格脏不脏。

我还尝试在 ComponentDidUpdate() 上将数据从状态直接设置到字段。但是，Formik 状态（使用标签）没有显示任何变化...

此外，我试过：

1) 使用 OnChange + setValue。但是，它似乎仅适用于用户输入（启用该字段并允许用户键入一些数据）。直接在现场设置数据不起作用。

2) 福尔尼克效应。然而没有任何成功。

Answer 1

我解决了在 Fomik 功能组件中渲染模态组件的问题。然后，对于我的模态组件的回调，我刚刚编写了一个方法来接收 Formiks setFieldValue 引用。然后可以手动将数据设置为 Formik 的状态：

我在 Formik 组件中的模态组件：

<Formik
        enableReinitialize={true}
        initialValues={props.quoteData}
        validationSchema={QuoteFormSchema}
        onSubmit={values => {
          props.onSubmit(values);
        }}
      >
        {({ values, setFieldValue }) => (
          <Form id='myForm'>
            <CustomerPopup
              showModal={showModal}
              close={() => toggleCustomerModal()}
              onSelect={data => onSelectCustomerHandler(data, setFieldValue)}
            />

我更新 Formik 状态的方法：

// Handle Customer Selection from Modal Component
  const onSelectCustomerHandler = (data, setFieldValue) => {
    setFieldValue('customerName', data.name);
    setFieldValue('customerId', data.id);
    toggleCustomerModal();
  };

Answer 2

一个好的方法是通过上下文 API 共享 setFieldValue 函数，而不是使用 props 深入发送它。

组件所在文件：

import React, { createContext } from 'react';

export const FormContext = createContext();

const MyForm = () => {

  return (
        <Formik  ...formikConfigs... >
            {({ values, handleSubmit, setFieldValue }) => (
                    <FormContext.Provider value={setFieldValue}>
                     ... call other components (fields) goes here ...
                    </FormContext.Provider>
            )}
        </Formik>
    );

在其他组件中：

import React, { useContext } from 'react';

const OtherComponent = () => {
    const setFieldValue = useContext(FormContext);

... rest of your code here ...

您可以通过以下方式更新任何字段：setFieldValue(feild name, field value)

如何从外部操作更新 Formik Field

How to update Formik Field from external actions

formik