表单CV上传字段报错：无法设置HTMLInputElement的value属性

问题背景 #

我有一个包含姓名、姓氏及CV上传字段的表单，当前处理字段变更的逻辑如下：

const handleChange = (event) =>{
    const value = event.target.name === "cv" ? event.target.files[0] : event.target.value;
    const name = event.target.name;
    setJobForm((prev)=>{
      return {...prev,[name]:value}
    })
}

表单状态定义：

const [jobForm,setJobForm] = useState({
    name:'',
    lastname:'',
    day:'',
    month:'',
    year:'',
    phone:'',
    email:'',
    jobPosition:'',
    coments:'',
    cv:[]
})

上传PDF文件时触发以下错误：

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

错误原因 #

• 核心问题是你大概率在渲染文件输入框时，把jobForm.cv的值直接绑定到了输入框的value属性上。出于安全限制，浏览器禁止JavaScript直接设置文件输入框的value为非空字符串——只能设为空。当你尝试把选中的File对象或文件路径赋值给value时，就会触发这个报错。
• 另外初始状态里cv设为数组[]，但文件输入框选中后返回的是单个File对象，类型不匹配也会加重这个问题。

最佳实践 #

• 不要给文件输入框绑定value（除非清空用）
  文件输入框的选中状态由浏览器自身管理，不需要通过React状态控制其value。如果需要清空已选文件，只需把jobForm.cv设为null，然后在输入框上判断：当cv为空时设置value=""即可。

• 修正初始状态类型
  把cv的初始值从数组[]改成null或undefined，和单个文件上传返回的File对象/null类型匹配：

  const [jobForm,setJobForm] = useState({
      // 其他字段保持不变
      cv: null
  })
  

• 优化handleChange逻辑
  可以解构简化代码，同时确保文件字段取值正确：

  const handleChange = (event) => {
      const { name, files, value } = event.target;
      const fieldValue = name === "cv" ? files[0] : value;
      setJobForm(prev => ({ ...prev, [name]: fieldValue }));
  }
  

• 正确渲染文件输入框
  仅在需要清空时设置value，平时不绑定：

  <input
      type="file"
      name="cv"
      accept=".pdf"
      onChange={handleChange}
      value={jobForm.cv === null ? "" : undefined}
  />
  

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