使用formik-wizard构建多步骤表单：返回首步文件输入框为空问题求助

问题原因 #

File类型输入控件属于特殊表单元素：

1. Formik默认不会将File对象存入表单state，因为File对象不可序列化，且出于安全限制，原生input[type="file"]无法通过value属性直接设置选中值。
2. 切换步骤时Formik-Wizard会重新渲染第一步组件，此时未保留文件引用的输入框会自动重置为空。

解决方案 #

通过组件本地状态维护文件引用，同时在Formik中存储文件元数据（避免序列化问题），实现返回步骤时的状态恢复：

1. 在BasicInfo组件中添加本地状态与逻辑

修改src/components/BasicInfo/index.jsx：

import { useState, useEffect } from 'react';
import { useFormikContext } from 'formik';

const BasicInfo = () => {
  const { values, setFieldValue } = useFormikContext();
  // 本地状态保存选中的文件对象
  const [selectedFile, setSelectedFile] = useState(null);

  // 组件挂载/values变化时，从元数据恢复选中状态提示
  useEffect(() => {
    if (values.fileMetadata) {
      setSelectedFile(values.fileMetadata);
    }
  }, [values.fileMetadata]);

  // 处理文件选择事件
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedFile(file);
      // 将文件元数据存入Formik，而非文件本身
      setFieldValue('fileMetadata', {
        name: file.name,
        size: file.size,
        type: file.type
      });
    }
  };

  return (
    <div>
      <div>
        <label htmlFor="name">姓名</label>
        <input
          id="name"
          name="name"
          type="text"
          onChange={(e) => setFieldValue('name', e.target.value)}
          value={values.name || ''}
        />
      </div>
      <div>
        <label htmlFor="file">上传文件</label>
        <input
          id="file"
          type="file"
          onChange={handleFileChange}
        />
        {/* 显示已选中的文件提示，替代原生输入框的选中状态显示 */}
        {selectedFile && <p>已选中：{selectedFile.name}</p>}
      </div>
    </div>
  );
};

export default BasicInfo;

2. 提交时获取文件对象

若提交需要真实File对象，直接使用组件本地的selectedFile状态即可；若跨步骤需要传递文件，可通过Context或全局状态（如Redux）暂存，注意避免长期存储大文件对象。

补充说明

原生input[type="file"]出于安全限制无法直接恢复选中状态，上述方案通过显示已选文件信息让用户感知状态。若需要更贴合原生的视觉效果，可隐藏原生输入框，用自定义按钮和显示区域模拟文件选择UI，完全控制状态展示。

内容的提问来源于stack exchange，提问作者Mister AD