输入字段失去了对复杂 Formik 表单中每个值变化的关注

Question

我正在构建一个需要复杂表单生成（来自 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-wizard-form。

我查看了有关类似主题的 stackoverflow 问题，但找不到适合我需要的内容。许多问题/答案都是关于动态 key 道具的问题，但据我所知，我的是静态的（它们都取自最初的 formSetup 对象）。

我注意到的另一件事是我的表单在每次值更改时都会重新呈现，但我不确定这是否是个问题。

---

您能帮我弄清楚问题出在哪里，为什么会发生，以及如何让我的表单字段不失去焦点？

Answer 1

解决了问题

我已经删除了所有可能的组件创建代码，并将所有内容移到了formik-wizard-form 库提供的Step 组件的component 属性中。

这是我的工作解决方案：https://codesandbox.io/s/formik-form-wizard-test-lz3x7（希望这会对某人有所帮助）

非常感谢 cmets 部分的每一个人！

---

主要见解：

1. 失去焦点意味着组件unmounts and remounts 每次。

2. 每次更改的这种卸载/重新安装行为是由在另一个组件的 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);