无法捕获 onChange 事件答案

【问题标题】：Can't capture onChange event无法捕获 onChange 事件
【发布时间】：2017-05-02 09:24:43
【问题描述】：

我正在尝试实施一种解决方案，您可以隐藏用户为输入类型“文件”选择的文件。这是概述解决方案的堆栈文章：input type=file show only button

我无法捕获 onChange 事件，因此无法读取文件。方法“saveFileToStoreOnChange”中的事件未定义。我在哪里偏离了道路？

html (jsx):

<input className="invisible" type="file" id="logo"/>
<input type="button" value="Browse..." onClick={this.saveFileToStoreClick} />

Javascript：

saveFileToStoreClick(){
        $('#logo').on('change', this.saveFileToStoreOnChange());
    }

saveFileToStoreOnChange(event){
        //event is undefined
        let file = event.target.files[0];
}

【问题讨论】：

你在调用 this.saveFileToStoreOnChange() 而不是传递它给on()。

标签： javascript jquery reactjs

【解决方案1】：

您在事件中没有正确的上下文。绑定或使用箭头函数：

onClick={(e) => this.saveFileToStoreClick(e)}

我不知道您为什么要以编程方式使用 jQuery 绑定到事件（或者甚至使用 jQuery，或者使用 ID 选择器而不是引用）。我不明白文件输入中没有onChange 处理程序的原因。

正如评论者所说，您也在调用该函数，而不是在您的事件中传递它。

【讨论】：

我在文件输入上没有 onChange 处理程序的原因可以在这里找到：stackoverflow.com/questions/1084925/…。这是我尝试在隐藏所选文件的位置实施的第二个解决方案。
解决这个问题的正确方法是不要在 React 中使用 jQuery...
同意。并且 - 我通过使用一个简单的 .css 类找到了问题的解决方案，就像这里的第二个解决方案一样：stackoverflow.com/questions/6105116/…

【解决方案2】：

您正在调用 this.saveFileToStoreOnChange() 而不是传递函数。

将您的代码更改为：

$('#logo').on('change', this.saveFileToStoreOnChange);

（见函数名后面去掉的()）

【讨论】：

没用。它从未进入 saveFileToStoreOnChange 方法

【解决方案3】：

此代码可能对您有所帮助

saveFileToStoreClick(){

            $('#logo').on('change', this.saveFileToStoreOnChange());
        }

    saveFileToStoreOnChange(event){


            let file = event.currentTarget.files[0];
    }

【讨论】：