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-input和react-file-reader，并尝试使用代码段中的原始输入代码。它们都没有触发onChange处理程序。系统文件上载对话框显示，但在选择文件时没有任何反应。如何才能触发onChange事件？

Answer 1

它在这里工作：

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的另一个版本，但它对你来说应该是一样的。

Answer 2

对于在这里使用google的其他用户：我有一个类似的问题，我发现的解决方案是，我的<input>在单击按钮以打开文件选择器后已从DOM中删除。（它在下拉菜单中。）

单击输入仍显示文件选择器，但这也导致下拉菜单隐藏，从而从DOM中删除了输入。选择文件后，onChange不会触发。我将输入内容移到了不会从DOM中删除的地方，事情又开始恢复正常。

Answer 3

我遇到了同样的问题。问题是多个输入具有相同的ID。为每个输入设置唯一的ID后，问题就解决了。谢谢

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

Answer 4

这是设计使然的Chrome。将value设置为空字符串，并将文件存储在useState（）挂钩或ref中。

Answer 5

使用 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>

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

5 个答案: