未从输入调用 onChange 方法答案

【问题标题】：onChange method not getting called from input未从输入调用 onChange 方法
【发布时间】：2017-10-10 23:32:13
【问题描述】：

我有一个打开文件资源管理器的按钮。我就是这样做的

 {
   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 没有被触发吗？我该如何解决？

【问题讨论】：

也许您应该首先将您的 html 和您的 js 代码分开，因为您在 html 中混淆了太多不同的代码。如果您使用 jquery，您可以执行类似于 thisExample 中的操作。附带说明一下，如果您正在动态生成 html，则您的事件可能没有正确绑定。用静态代码测试你的函数，看看它们是否工作。
在写 onchange={} 时字母 c 应该很小
@komal onChange 是一个 HTML 属性。 HTML 不区分大小写。只有在 JavaScript 中使用 onchange 元素属性时，它才应该全部小写。
@ScottMarcus - 感谢您的反馈，但即使在 HTML 中，onchange 也是用小写的 c 编写的。请查看此链接：w3resource.com/html/attributes/html-onchange-attribute.php
@komal 这是不正确的。你所做的只是指向一个使用onchange 的页面。该页面必须以某种方式编写，因此他们选择全部小写。 HTML 是一种不区分大小写的语言。这是规范中的文档：w3c.github.io/html-reference/documents.html#case-insensitivity

标签： javascript html reactjs

【解决方案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>
        );
    }
}

【讨论】：

【解决方案2】：

因为你这里没有调用handleFileSelect函数，它是由你的eventListener调用的，所以你需要绑定它，如下代码：

this.handleFileSelect.bind(this)

【讨论】：