React类组件中点击按钮时如何清空文件输入框内容

<input type="file"> 是原生非受控表单元素，仅重置React组件state中存储的file值，不会同步修改DOM节点本身的选中状态，因此输入框仍会显示之前选中的文件名。

方案1：通过ref直接操作DOM清空（推荐） #

浏览器安全规则允许将文件输入框的value属性设置为空字符串来清空选中状态，通过ref拿到DOM节点操作即可，适配所有React版本：

• 第一步：创建ref实例绑定到文件输入框
  在类组件构造函数中初始化ref：

constructor(props) {
  super(props)
  this.state = { file: null }
  this.fileInput = React.createRef()
}

给input标签添加ref属性：

<input type="file" ref={this.fileInput} onChange={this.handleFile}/>

• 第二步：提交逻辑中同时清空state和DOM值

handleSubmit (){
  this.setState({file: null})
  this.fileInput.current.value = '' // 直接清空输入框DOM的选中状态
}

注意：文件输入框的value仅允许赋值为空字符串，传入其他值会被浏览器拦截报错，属于正常的安全限制。

方案2：修改key值强制重渲染输入框 #

React渲染时如果发现同位置元素的key属性变化，会直接卸载旧节点、挂载全新的DOM节点，新的文件输入框默认就是空状态，不需要操作DOM：

• 第一步：在state中增加输入框key标识

this.state = {
  file: null,
  fileInputKey: 0
}

给input标签绑定key属性：

<input type="file" key={this.state.fileInputKey} onChange={this.handleFile}/>

• 第二步：提交时更新key触发重渲染

handleSubmit (){
  this.setState({
    file: null,
    fileInputKey: this.state.fileInputKey + 1 // key变化会触发输入框重新挂载
  })
}

不要尝试给文件输入框绑定value属性做常规受控组件，File对象是浏览器只读属性，无法通过React state手动赋值，强行绑定会抛出错误。

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