Question

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

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

反应16.8.6 Formik 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功能组件内部渲染模式组件的问题。然后，对于我的模式组件的callBack，我刚刚编写了一个将接收Formiks setFieldValue参考的方法。然后可以将数据手动设置为Formik的状态：

Formik组件中的我的Modal组件：

<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();
  };

如何从外部动作更新Formik Field

1 个答案: