我正在尝试从模式屏幕更新 Formik 字段。模态返回数据并将它们设置到 pageState 中。考虑到我的 Fomik Form 有“enableReinitialize”,字段更新工作正常。 但是,如果表单处于“脏”状态,这意味着表单中的其他一些字段已更新,则更新字段的过程将不再起作用。该字段本身是只读字段,用户填充数据的唯一方法是单击按钮并从模态中选择数据。
有人知道这个问题的解决方法吗?
反应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)福米克效应。然而没有任何成功。
我解决了在 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();
};
此处的一个好方法是使用
useFormikContext
函数从中提取 setFeildValue
。
组件所在文件:
const OtherComponent = () => {
const { setFieldValue } = useFormikContext();
... rest of your code here ...
您可以通过以下方式更新任何字段:
setFieldValue(feild name, field value)
使用useFormik hook时,API提供了这个功能: 验证.setFieldValue(键,值)