javascript - 输入字段失去对复杂 Formik 表单中每个值更改的关注

Question

我正在构建一个需要复杂表单生成的应用程序(来自 json/js 对象)。

这是我正在构建的示例:https://codesandbox.io/s/formik-form-wizard-test-vcj1t

我的问题如下:

all the input fields lose focus on every value change

---

CodeSandbox 项目的文件夹结构如下(为了更容易理解代码):

./src:

• App.js - 包含所有表单生成的主文件(generateWizardSteps 是执行所有生成的主要函数)。

  <

• formSetup.js - 这是一个定义表单配置的对象。我需要从这样的对象构建动态表单。这个对象有一个pages数组(这些是向导的步骤)，每个page有一个fields数组(比如输入，选择、复选框等)。反过来，每个 field 都有 props 属性。 props 是我作为 props 传递给 React 组件的内容。

• formComponents.js - 此文件包含我用于生成表单的所有表单字段 React 组件。

• decorateWithFormik.js - 这个文件只是为了让 App.js 小一点。它只是 useFormik 装饰器。

---

表单是使用 formik 构建的图书馆。另外，因为我需要一个类似向导的表单，所以我为它找到了一个不错的库:formik-wizard-form .

我查看了关于类似主题的 stackoverflow 问题，但找不到符合我需要的内容。许多问题/答案都是关于动态 key Prop 的问题，但据我所知，我的是静态的(它们都取自初始的 formSetup 对象)。

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

---

你能帮我弄清楚问题出在哪里吗？为什么会这样？如何让我的表单字段不失去焦点？

Answer 1

解决了问题

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

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

非常感谢评论区的大家!

---

主要见解:

1. 失去焦点意味着组件每次都卸载并重新挂载。

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