ReactJS - 如何检测何时单击文件输入的取消？答案

【问题标题】：ReactJS - How to detect when cancel is clicked on file input?ReactJS - 如何检测何时单击文件输入的取消？
【发布时间】：2018-09-12 14:31:04
【问题描述】：

当用户点击文件输入对话框上的十字图标或取消按钮时，我想要一个事件或得到通知，以便我可以基于此执行一些任务.

onChange 事件仅在用户点击打开按钮时触发。

有没有办法在用户使用 ReactJS 点击十字图标或取消按钮时得到通知？

下面是工作代码sn-p。

class Test extends React.Component {
  constructor() {
    super();
    this.fileInputClicked = this.fileInputClicked.bind(this);
  }
  
  fileInputClicked(event){
    let file = event.target.files[0];
    console.log("File is Selected", file);
  }

  render() {
    return (
      <div>
        <div>
          <p>Hello world</p>
            <input type="file" onChange={this.fileInputClicked}/>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Test/>, 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' />

【问题讨论】：

标签： javascript html reactjs file event-handling

【解决方案1】：

嗯，这可能是我会做的，但我不是很喜欢它，而且我认为因为用户决定不上传文件而执行某事的整个想法并不是一个好的用户体验，所以使用它明智的。

fileInputClicked(event){
        let file = event.target.files[0];
        console.log("File is Selected", file);
        window.removeEventListener('focus', this.handleFocusBack);
}

handleFocusBack(){
    console.log('focus-back');
    window.removeEventListener('focus', this.handleFocusBack);
}

clickedFileInput(){
    window.addEventListener('focus', this.handleFocusBack);
}

render() {
    return (
        <div>
            <div>
                <p>Hello world</p>
                <input onClick={this.clickedFileInput} type="file" onChange={this.fileInputClicked}/>
            </div>
        </div>
    );
}

这样，当用户决定关闭文件输入时，他会重新关注窗口，您将获得所需的handleFocusBack 功能，当他添加文件时，他会转到fileInputClicked。

Afaik，没有“开箱即用”的机制来实现您想要的。

【讨论】：