React-Aria按钮组件如何实现事件传播以触发父级文件上传？

这里有几种实用的方法可以让嵌套按钮的点击操作触发父级文件上传器的行为：

1. 手动触发父元素的点击事件 #

给父级上传器div添加ref，在按钮的点击回调里直接调用父元素的click()方法，绕过事件冒泡的限制：

import { useRef } from 'react';

function FileUploader() {
  const uploaderRef = useRef(null);

  const handleButtonClick = () => {
    uploaderRef.current?.click();
  };

  return (
    <div 
      ref={uploaderRef} 
      className="file-uploader"
      onClick={() => document.querySelector('.upload-input').click()}
    >
      <button onClick={handleButtonClick}>选择文件</button>
      <input className="upload-input" type="file" hidden />
    </div>
  );
}

2. 取消React-Aria对事件冒泡的阻止 #

React-Aria部分组件会在内部调用event.stopPropagation()，可以通过在按钮的捕获阶段修改事件对象，阻止React-Aria的后续阻止操作：

function FileUploader() {
  const handleButtonCapture = (e) => {
    // 覆盖stopImmediatePropagation，让事件能继续冒泡到父元素
    e.stopImmediatePropagation = () => {};
  };

  return (
    <div 
      className="file-uploader"
      onClick={() => document.querySelector('.upload-input').click()}
    >
      <button onClickCapture={handleButtonCapture}>选择文件</button>
      <input className="upload-input" type="file" hidden />
    </div>
  );
}

3. 直接让按钮关联文件输入（推荐） #

绕开父元素的事件依赖，直接让按钮触发隐藏文件输入框的点击，这是最直接且不易出问题的方案：

import { useRef } from 'react';

function FileUploader() {
  const fileInputRef = useRef(null);

  const handleButtonClick = () => {
    fileInputRef.current?.click();
  };

  return (
    <div className="file-uploader">
      <button onClick={handleButtonClick}>选择文件</button>
      <input ref={fileInputRef} type="file" hidden />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Brace Sproul