如何将预设值传入Formik表单的formValue并完成提交？

核心思路 #

Formik追踪表单值依赖字段name与initialValues的结构匹配，只要把隐藏字段的name对应到Formik的value路径，同时正确绑定value，提交时就能自动收集到formValue里。下面分两种场景给出具体实现：

场景1：单个组的编辑表单 #

如果只是编辑单个组，直接在initialValues里预设oldgroup的初始值，然后用Field组件绑定即可：

import { Formik, Form, Field } from 'formik';

// 假设你的原始组数据
const targetGroup = { name: '旧组名' };

export default function SingleGroupEditForm() {
  return (
    <Formik
      // 初始化表单值，预设oldgroup为原始组名
      initialValues={{ group: '', oldgroup: targetGroup.name }}
      onSubmit={(formValue) => {
        console.log(formValue);
        // 输出：{ group: '你输入的新组名', oldgroup: '旧组名' }
      }}
    >
      <Form>
        {/* 输入新组名的字段 */}
        <Field name="group" type="text" placeholder="输入新组名" />
        {/* 隐藏字段，name对应initialValues里的oldgroup，value绑原始组名 */}
        <Field name="oldgroup" type="hidden" value={targetGroup.name} />
        <button type="submit">提交</button>
      </Form>
    </Formik>
  );
}

场景2：循环渲染多个组的编辑表单 #

如果是批量编辑多个组，需要给每个字段的name加上索引路径，确保Formik能区分不同组的字段：

import { Formik, Form, Field } from 'formik';

// 假设你的批量组数据
const groupsList = [
  { name: '旧组名1' },
  { name: '旧组名2' },
  { name: '旧组名3' },
];

export default function BatchGroupEditForm() {
  return (
    <Formik
      // 初始化数组结构的表单值，每个项都包含group和oldgroup
      initialValues={{
        groups: groupsList.map(group => ({
          group: '',
          oldgroup: group.name
        }))
      }}
      onSubmit={(formValue) => {
        console.log(formValue);
        // 输出：{ groups: [{group: '新组名1', oldgroup: '旧组名1'}, ...] }
      }}
    >
      {({ values }) => (
        <Form>
          {values.groups.map((_, index) => (
            <div key={index}>
              {/* 每个组的输入框，name带索引路径 */}
              <Field
                name={`groups[${index}].group`}
                type="text"
                placeholder="输入新组名"
              />
              {/* 每个组的隐藏字段，name对应数组项的oldgroup，value绑定原始组名 */}
              <Field
                name={`groups[${index}].oldgroup`}
                type="hidden"
                value={groupsList[index].name}
              />
            </div>
          ))}
          <button type="submit">批量提交</button>
        </Form>
      )}
    </Formik>
  );
}

关键注意点 #

1. name路径必须匹配：如果是数组结构的表单，每个字段的name要写成groups[索引].字段名的格式，Formik才能正确定位到对应的表单值。
2. initialValues要提前初始化：Formik只会追踪initialValues里存在的字段，所以必须把oldgroup提前加到初始值里，哪怕只是空值（但这里直接设为原始组名更高效）。
3. 避免重复name：循环渲染时如果所有隐藏字段都用oldgroup作为name，Formik只会保留最后一个字段的值，一定要加索引区分。

内容的提问来源于stack exchange，提问作者Christopher Zamora