javascript - 输入字段失去了对复杂 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对象）。

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

---

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

标签： javascriptreactjsformik

Answer 1

解决了问题

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

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

非常感谢评论区的每一个人！

---

主要见解：

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