我正在构建一个需要复杂表单生成(从json/js对象(的应用程序。
以下是我正在构建的一个示例：https://codesandbox.io/s/formik-form-wizard-test-vcj1t
我的问题如下：
所有输入字段都会失去对每个值更改的关注
CodeSandbox项目的文件夹结构如下(为了更容易理解代码(：
./src:
-
App.js-包含所有表单生成的主文件(generateWizardSteps是执行所有生成的主函数(。 -
formSetup.js——这是一个定义表单配置的对象。从这样的对象中，我需要构建动态表单。这个对象有一个pages的数组(这些是向导的步骤(，每个page有一个fields的数组(如输入、选择、复选框等(。反过来，每个field都具有props属性。props是我作为道具传递给React组件的内容。 -
formComponents.js-这个文件包含我用来生成表单的所有表单字段React组件。 -
decorateWithFormik.js-这个文件只是为了使App.js小一点。它只是useFormik装饰器。
表单是使用formik库构建的。此外，由于我需要一个类似向导的表单，我为它找到了一个很好的库：formik向导表单。
我浏览了类似主题的stackoverflow问题，但找不到符合我需求的内容。许多问题/答案都是关于动态key道具的问题，但据我所知，我的问题/答案是静态的(它们都取自初始formSetup对象(。
我注意到的另一件事是，每次值更改时，我的表单都会重新呈现，但我不确定这是否是一个问题。
你能帮我弄清楚问题是什么吗，为什么会发生这种情况，以及如何使我的表单字段不失去焦点？
解决问题
我已经删除了所有可能的组件创建代码，并移动了formik-wizard-form库提供的Step组件的component道具中的所有内容。
以下是我的工作解决方案：https://codesandbox.io/s/formik-form-wizard-test-lz3x7(希望这能帮助到别人(
非常感谢评论区的每一个人！
主要见解：
-
失焦意味着每次分量
unmounts and remounts。 -
每次更改的这种卸载/重新安装行为是由在另一个组件的
render函数内创建组件引起的。因此，在每次重新渲染时，都会重新创建输入组件。
我的最终工作代码：
const MyForm = props => {
return (
<FormikWizardProvider {...props}>
{renderProps => (
<Wizard {...renderProps}>
<StepsList>
{formSetup.pages.map(page => (
<Step
title={page.name}
key={page.name}
component={() =>
page.fields.map(field => {
if (
field.props &&
field.props.visibilityCheckbox &&
!props.values[field.props.visibilityCheckbox]
) {
return null;
}
const fieldProps = {
formik: props,
key: field.props.name,
...field.props
};
switch (field.type) {
case "input":
return <MyTextInput {...fieldProps} />;
case "radio":
return <RadioButtonGroup {...fieldProps} />;
case "checkbox":
return <MyCheckbox {...fieldProps} />;
case "select":
return <MySelect {...fieldProps} />;
default:
return null;
}
})
}
/>
))}
</StepsList>
<ButtonsList>
<PreviousButton />
<NextButton />
<SubmitButton />
</ButtonsList>
</Wizard>
)}
</FormikWizardProvider>
);
};
export default decorateWizardWithFormik(MyForm);