反应输入类型文件 onChange 未触发

Question

在本地开发服务器上使用 React v16.1。我有一个简单的组件可以在这里上传文件：

class FileImporter extends React.Component {
    constructor(props) {...}
    importFile(e) {
      // import the file here, not firing
    }
    render() {
      return (<input type="file" onChange={this.importFile.bind(this)} />);
    }
}    

该函数importFile永远不会触发。我尝试onChange通过以下方式进行绑定：

onChange={e => this.importFile(e)}
onChange={this.importFile.bind(this)}
onChange={this.importFile}

我试过使用react-file-reader-inputand react-file-reader，并且只是像代码片段中那样的原始输入标签。他们都没有触发 onChange 处理程序。系统文件上传对话框出现，但在选择文件时没有任何反应。如何触发 onChange 事件？

Answer 1

对于在此处 google 的其他人：我遇到了类似的问题，我发现的解决方案是<input>单击按钮打开文件选择器后，我被从 DOM 中删除。（它在一个下拉菜单中。）

单击输入仍会显示文件选择器，但这也会导致下拉菜单隐藏，从而从 DOM 中删除输入。选择文件后，onChange 从未触发。我将输入移动到一个不会从 DOM 中删除的地方，然后事情又开始工作了。

Answer 2

我还有另一种情况，其中输入被隐藏，并且我有一个按钮可以触发输入的文件选择对话框。

该应用程序显示了对文件的验证（不用担心这一点，可能只是考虑我告诉用户对文件进行一些更改并重新上传的情况）。

因此，当用户尝试再次重新上传同一文件时，第二次更改不会触发。但如果用户选择不同的文件，它就会起作用。

这是因为我在第一次用户上传不正确后第一次没有清除文件输入的值。因此浏览器以某种方式认为该文件是相同的，因此不会触发 onchange。

有趣的是，当我将输入的值设置为空白字符串时（特别是在我的反应项目中，我有一个对输入的引用，所以我inputRef.current.value = ''在反应中做了）并且它起作用了。

Answer 3

使用 onInput 代替 onChange

                <div className="profile-form-buttons centercontents">
                    <input className="form-compo"
                        type="file" 
                        name="file-uploader" 
                        id="file-uploader"  
                        onInput={imageUpdate}
                        style={{display:"none"}}
                        />
                </div>

Answer 4

我也经历过同样的问题。问题是我的多个输入有相同的 id。一旦我为每个输入设置了唯一的ID，问题就解决了。谢谢

<label htmlFor="file-input-id">Upload</label>
<input type="file" id="file-input-id" onChange={this.onSelectImage} />

Answer 5

它在这里工作：

class FileImporter extends React.Component {    
    importFile(e) {
      console.log("fired.");
    }
    render() {
      return (<input type="file" onChange={this.importFile.bind(this)} />);
    }
}

ReactDOM.render(<FileImporter />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

所以它一定是你正在做的其他事情或其他代码。我知道这是 React 的不同版本，但它对你来说应该是一样的。