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。

Afaik，没有开箱即用的＆＃39;实现你想要的机制。