formik - 如何从外部操作更新 Formik 字段
问题描述
我正在尝试从模式屏幕更新 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)Formik效应。然而没有任何成功。
解决方案
我解决了在 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();
};
推荐阅读
- java - Android Path - 通过X轴值获取特定点的坐标
- javascript - 在 async.filter() 数组 nodejs 中获取异步结果
- excel - 使用 VBA 打印外部 Excel 文件
- bash - 如何在一个循环中只运行一个步骤?
- python - 为什么“try...else”在 Python 中是“无效语法”?
- apache-spark - Spark 2.3.1 错误 AsyncEventQueue:70 - 从队列 appStatus 中删除事件
- ffmpeg - ffmpeg 2在aws Lamba上通过编码
- c - 指针关闭后,无法使用system()命令删除文件,并显示该文件已被其他程序使用
- vue.js - vue-grid-layout:仅更新特定的网格项
- java - Logback 加载配置优先级