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

Question

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

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，没有“开箱即用”的机制来实现你想要的。