如何在Formik与React中正确处理多文件输入的状态绑定问题

问题根源 #

原生 <input type="file"> 属于浏览器定义的只读类输入元素，按照W3C规范，其value属性仅支持两种合法赋值：空字符串（表示无选中文件）、浏览器自动写入的选中文件路径列表。JS代码无法主动将该属性赋值为任意非空自定义值，这是之前所有报错的核心来源。

核心实现规则 #

• 修正Formik初始值类型，将files的初始值从空字符串改为空数组[]，保证Formik状态中存储的文件集合类型一致，从根源避免React的非受控输入转受控输入警告
• 避开Formik内置Field组件对文件输入的自动透传逻辑：内置Field会默认将对应字段的Formik状态值直接绑定到input的value属性上，对文件类型输入来说，这种绑定会直接触发InvalidStateError报错
• 文件输入的DOM value属性仅固定绑定空字符串""，不将Formik中存储的文件数组透传到该属性，完全符合浏览器的只读赋值规则
• 提交完成后清空选中状态时，除了通过setFieldValue更新Formik中的文件数组，还要通过ref引用手动将原生input的value置为空字符串，同步清空浏览器层面的选中UI状态
• 选中文件的信息展示不依赖原生input的内置UI，直接读取Formik中存储的文件数组自定义渲染列表，解决原生输入无法展示完整文件信息的体验问题

完整可运行代码示例 #

import { Formik, Form } from "formik";
import { useRef } from "react";

const MyForm = () => {
  // 绑定原生文件输入元素的ref，用于提交后清空DOM状态
  const fileInputRef = useRef(null);

  const handleOnSubmit = async (values, actions) => {
    // 此处替换为实际的文件上传业务逻辑
    console.log("待上传文件列表：", values.files);

    // 提交完成后清空状态
    actions.setFieldValue("files", []);
    // 手动重置DOM输入的选中状态
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
    actions.setSubmitting(false);
  };

  return (
    <Formik
      initialValues={{ files: [] }}
      onSubmit={handleOnSubmit}
    >
      {({ values, setFieldValue, isSubmitting }) => (
        <Form>
          <input
            ref={fileInputRef}
            id="files"
            name="files"
            type="file"
            multiple
            // 固定绑定空字符串，完全符合浏览器对文件输入的value赋值规则
            value=""
            onChange={(event) => {
              // 将浏览器返回的FileList转为数组存入Formik状态，供上传逻辑调用
              setFieldValue("files", Array.from(event.target.files));
            }}
          />

          {/* 自定义选中文件展示列表，替代原生输入的内置展示逻辑 */}
          {values.files.length > 0 && (
            <div style={{ marginTop: 12 }}>
              <p>* 已选文件列表：</p>
              <ul>
                {values.files.map((file, index) => (
                  <li key={`${file.name}-${index}`}>
                    {file.name}（{(file.size / 1024).toFixed(1)} KB）
                  </li>
                ))}
              </ul>
            </div>
          )}

          <button 
            type="submit" 
            disabled={isSubmitting}
            style={{ marginTop: 16 }}
          >
            提交上传
          </button>
        </Form>
      )}
    </Formik>
  );
};

踩坑对应修正说明 #

• 不会触发InvalidStateError：从未给文件输入的value属性赋值非空的数组对象，仅固定赋值空字符串，完全符合浏览器的只读约束
• 不会触发非受控输入警告：从组件挂载开始，文件输入的value属性就是明确的空字符串，不存在值类型从undefined切换为有值的过程，全程处于受控状态
• 提交后可完整清空选中状态：既清空了Formik存储的文件数组，又通过ref重置了DOM输入的选中UI，无残留状态
• 选中文件信息展示可控：自定义的文件列表可以展示文件名、大小等自定义信息，不受原生输入UI的限制

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