输入字段失去对复杂 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 的数组（如输入、select、复选框等） .反过来，每个 field 都有 props 属性。 props 是我作为道具传递给 React 组件的内容。
formComponents.js - 此文件包含我用于生成表单的所有表单字段 React 组件。
decorateWithFormik.js - 这个文件只是为了让 App.js 小一点。这只是 useFormik 装饰器。

表单是使用 formik library. Also, as I need a wizard-like form, I've found a nice library for it: formik-wizard-form 构建的。

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

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

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

Answer 1

已解决问题

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

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

非常感谢评论区的大家！

主要见解：

失去焦点意味着组件每次unmounts and remounts。
每次更改时的这种 unmounting/remounting 行为是由在另一个组件的 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);

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

Input fields lose focus on each value change in a complex Formik form

javascript

reactjs

formik