ReactJS：如何检测文件输入对话框的取消按钮点击事件？

这个问题确实挺常见的——原生file input的onChange事件确实只在用户成功选择文件时触发，点击取消或关闭对话框时不会给我们任何反馈。不过别担心，我们可以用一些小技巧来实现监听取消操作的需求，下面给你两种可行的方案：

方案一：结合onClick + onBlur + 定时器 #

这是最可靠的方法，核心思路是利用文件选择对话框打开和关闭时input的焦点变化，配合定时器来判断用户是否取消了操作：

1. 当用户点击file input时，重置input的value（避免重复选择同一文件时onChange不触发），同时启动一个定时器；
2. 如果用户选择了文件，onChange会触发，此时我们清除定时器，处理文件逻辑；
3. 如果用户取消了对话框，input会失去焦点（onBlur触发），定时器的回调会执行，我们就能处理取消逻辑。

以下是适配你提供的组件的完整代码：

class Test extends React.Component {
  constructor() {
    super();
    this.fileInputClicked = this.fileInputClicked.bind(this);
    this.handleFileChange = this.handleFileChange.bind(this);
    this.handleFileBlur = this.handleFileBlur.bind(this);
    this.cancelTimer = null;
  }

  fileInputClicked() {
    // 重置input的value，确保重复选同一文件时onChange能触发
    this.fileInput.value = '';
    // 启动定时器，等待用户操作完成
    this.cancelTimer = setTimeout(() => {
      console.log('用户取消了文件选择');
      // 在这里执行你的取消相关任务，比如更新状态、提示用户等
    }, 100);
  }

  handleFileChange(e) {
    // 用户选择了文件，清除定时器
    clearTimeout(this.cancelTimer);
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      console.log('用户选择了文件:', selectedFile.name);
      // 处理文件上传、预览等逻辑
    }
  }

  handleFileBlur() {
    // 清除原有定时器，避免重复触发
    clearTimeout(this.cancelTimer);
    // 延迟执行，确保浏览器完成对话框关闭的事件处理
    this.cancelTimer = setTimeout(() => {
      // 检查input的value是否为空，确认是取消操作
      if (!this.fileInput.value) {
        console.log('用户取消了文件选择');
        // 执行取消相关任务
      }
    }, 100);
  }

  render() {
    return (
      <div>
        <input
          type="file"
          ref={input => this.fileInput = input}
          onClick={this.fileInputClicked}
          onChange={this.handleFileChange}
          onBlur={this.handleFileBlur}
        />
      </div>
    );
  }
}

注意事项： #

• 定时器的延迟设为100ms是为了适配不同浏览器的事件触发顺序，避免误判；
• 重置input的value是关键，否则用户重复选择同一文件时，onChange不会再次触发。

方案二：监听document全局点击事件（不推荐） #

这种方法通过监听document的点击事件，判断用户是否点击了文件对话框以外的区域来推断取消操作，但需要处理事件冒泡和焦点判断，可靠性不如方案一，仅作为补充：

class Test extends React.Component {
  constructor() {
    super();
    this.isFileDialogOpen = false;
    this.fileInputClicked = this.fileInputClicked.bind(this);
    this.handleFileChange = this.handleFileChange.bind(this);
    this.handleDocumentClick = this.handleDocumentClick.bind(this);
  }

  componentDidMount() {
    document.addEventListener('click', this.handleDocumentClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleDocumentClick);
  }

  fileInputClicked() {
    this.isFileDialogOpen = true;
    this.fileInput.value = '';
  }

  handleFileChange(e) {
    this.isFileDialogOpen = false;
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      console.log('用户选择了文件:', selectedFile.name);
    }
  }

  handleDocumentClick(e) {
    if (this.isFileDialogOpen && !this.fileInput.contains(e.target)) {
      this.isFileDialogOpen = false;
      console.log('用户取消了文件选择');
      // 执行取消相关任务
    }
  }

  render() {
    return (
      <div>
        <input
          type="file"
          ref={input => this.fileInput = input}
          onClick={this.fileInputClicked}
          onChange={this.handleFileChange}
        />
      </div>
    );
  }
}

为什么不推荐？ #

• 不同浏览器对文件对话框的事件处理逻辑有差异，可能导致误判；
• 需要在组件卸载时移除全局事件监听，否则会造成内存泄漏。

内容的提问来源于stack exchange，提问作者Harsh Makadia