react输入类型文件 onChange 未触发

IT技术 javascript reactjs
2021-04-26 05:54:11

在本地开发服务器上使用 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 处理程序。系统文件上传对话框出现，但在选择文件时没有任何react。我怎样才能触发 onChange 事件？

4个回答

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

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

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

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

它在这里工作：

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

使用 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>
其它你可能感兴趣的问题
上一篇我可以使用 2D 照片获得 3D 打印模型吗？ 下一篇在 React 中，为什么我必须绑定一个 onClick 函数而不是调用它？