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

Question

我想要一个事件或在用户单击fileInput 对话框上的十字图标或取消按钮时收到通知，以便我可以基于此执行某些任务。

仅当用户单击“打开”按钮时才会触发onChange事件。

当用户使用 ReactJS 单击十字图标或取消按钮时，有没有办法收到通知？

下面是工作代码片段。

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' />

Answer 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.

老实说，没有“开箱即用”的机制来实现你想要的。