数据提交成功后如何从文件输入中清除文件选择？答案

【问题标题】：How to clear file(s) selection from file input after the data has successfully be submitted?数据提交成功后如何从文件输入中清除文件选择？
【发布时间】：2016-05-27 04:48:51
【问题描述】：

我正在使用 react.js，我有一个表单，我正在提交给 API，并且表单可以正常工作，直到我想清除字段。实际上，特别是一个字段，文件输入。我无法将其重置回“未选择文件”，我尝试创建一个 files= 属性并通过状态和所有内容控制它。没有任何工作，我错过了什么？

我只想在提交成功后重置它。

什么是正确的方法。

<input
    type="file"
    name="js-case-upload"
    className="form-control-static"
    filename={this.state.files}
    accept="image/*"
    onChange={ this._onChangeFileInput }
/>

【问题讨论】：

你能发布你的代码吗？

标签： javascript forms reactjs

【解决方案1】：

考虑到input 有id myFile，那么文件可以通过 vanilla javascript 重置，如下所示：

document.getElementById("myFile").value = "";

【讨论】：

【解决方案2】：

    const Upload = ({ onUpload }) => {
      const ref = useRef();

      const onChange = (e) => {
        onUpload(e.target.files, () => {
          ref.current.files = null;
        });
      };

      return <input ref={ref} onChange={onChange} type="file" />;
    };

我在上传文件后进行了回调。在回调中，我只是将文件设置为 null。

【讨论】：

我宁愿使用ref.current.value = null

【解决方案3】：

考虑在文件输入中添加ref="file"，并在提交数据后，使用this.refs.file.value = ''之类的内容。

编辑：

更简单的解决方案：https://jsfiddle.net/n06qk9h4/

【讨论】：

除非我遗漏了什么，否则 jsfiddle 不会提供任何有用的信息