React中如何清空file类型input字段的文件名与选中文件

核心原因 #

你之前的方案失效主要是两个常见问题：

1. 原生type="file"的input出于浏览器安全限制，value属性只能设置为空字符串，赋值null不会生效
2. 你使用的是自定义封装的MyInput组件，如果没有做ref转发、没有透传原生属性和事件，外部直接操作dom、绑定ref、传value都会不生效

可行解决方法 #

方案1：直接清空原生事件对象的target value（最简单，优先用）

只要你的MyInput组件透传了原生的onChange事件，直接在错误分支给e.target.value赋值为空字符串即可：

<Label for="exampleFile">Upload Video</Label>
<MyInput
  type="file"
  name="file"
  accept="video/*"
  id="exampleFile"
  label="Upload a Video"
  onChange={(e) => {
    const files = e.target.files;
    // 先判空避免报错
    if (!files?.length) return;

    const file = files[0];
    if (!file.type.match("video.*")) {
      alert("你不能上传非视频格式的文件");
      // 直接清空原生input的已选文件
      e.target.value = '';
      return;
    }
    // 符合格式的后续逻辑
  }}
/>

方案2：key值重置兜底方案（适配所有封装组件，100%生效）

如果你的MyInput封装程度很高，没有透传原生事件/属性，直接用key值触发组件重渲染即可：

import { useState } from 'react';

// 组件内部声明state管理key
const [fileInputKey, setFileInputKey] = useState(0);

// 渲染时给MyInput绑定key
<Label for="exampleFile">Upload Video</Label>
<MyInput
  key={fileInputKey}
  type="file"
  name="file"
  accept="video/*"
  id="exampleFile"
  label="Upload a Video"
  onChange={(e) => {
    const files = e.target.files;
    if (!files?.length) return;

    const file = files[0];
    if (!file.type.match("video.*")) {
      alert("你不能上传非视频格式的文件");
      // 更新key，React会销毁旧input，渲染全新的空input
      setFileInputKey(prev => prev + 1);
      return;
    }
    // 符合格式的后续逻辑
  }}
/>

这个方案的原理是React会根据key判断组件是否需要重建，key变化时旧的input实例会被直接销毁，天然清空所有已选内容。

方案3：ref方案（需要改造MyInput）

如果你想用ref操作，需要先给MyInput加上ref转发：

// MyInput组件定义改造
const MyInput = React.forwardRef((props, ref) => {
  // 内部原有逻辑不变，把ref绑定到原生input上
  return <input ref={ref} type={props.type} {...其他你需要透传的props} />
});

之后再在使用侧绑定ref操作即可：

import { useRef } from 'react';

const fileInputRef = useRef(null);

<MyInput
  ref={fileInputRef}
  type="file"
  // 其他属性不变
  onChange={(e) => {
    const files = e.target.files;
    if (!files?.length) return;

    const file = files[0];
    if (!file.type.match("video.*")) {
      alert("你不能上传非视频格式的文件");
      fileInputRef.current.value = '';
      return;
    }
  }}
/>

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