Question

我有一个按钮，我可以从中打开文件资源管理器。我这样做是

 {
   this.props.fileUploadIsOpen
      && <div className='assign-dialog'>
          <div className='assign-dialog-inner'>
             <div className='dia-title'> File Upload</div>
                <div className='dia-body'>
                   <div className='control-container'>
                       <div className='control-label'> Video File</div>
                           <div className='control'>
                             <input type="text" className="form-control" id="usr"/>
                             <button type="button" className="btn btn-primary" onClick={(e) => this.upload.click()}>Browse</button>
                             <input id="myInput" type="file" ref={(ref) => this.upload = ref} style={{visibility: 'hidden', width:0}} onChange={this.handleFileSelect}/>
                           </div>
                       </div>

但onChange方法没有被调用。当我选择一个文件时，没有任何反应。 onChange方法应该调用handleFileSelect函数，它在控制台中输出文件名。但控制台没有任何反应。 onChange没有被触发？我该如何解决？

Answer 1

我不知道为什么要将函数传递给ref attr，但是我重新创建了你的案例，并指出了你想要的东西

class Uploader extends React.Component {
    constructor () {
        super();
    }

    onClick (e) {
        const {fileUpload} = this.refs;
        fileUpload.click();
    }
    // prints the file name
    handleFileSelect (e) {
        const {fileUpload} = this.refs;
        console.log(fileUpload.files[0].name)
    }
    render () {
        return (
            <div>
                <div className='control-label'> Video File</div>
                <div className='control'>
                    <input type="text" className="form-control" id="usr"/>
                    <button 
                    type="button" 
                    className="btn btn-primary" 
                    onClick={this.onClick.bind(this)}>Browse</button>
                    <input id="myInput" type="file" ref="fileUpload" style={{visibility: 'hidden', width:0}} onChange={this.handleFileSelect.bind(this)}/>
                </div>
            </div>
        );
    }
}

Answer 2

因为你没有在这里调用handleFileSelect函数并且它被eventListener调用，你需要绑定它，就像这段代码一样：

this.handleFileSelect.bind(this)

onChange方法没有从输入调用

2 个答案: