用TypeScript实现React通用MUI文件选择按钮组件

我现有一个基于MUI Button实现的文件选择组件，点击按钮会唤起系统文件选择窗口，使用方式如下：

<SelectFileButton onFileSelected={(selectedFiles) => { ... }}>选择文件</SelectFileButton>

现在需要把这个组件改造成通用组件，支持用任意可点击组件（比如自定义按钮、图标按钮等）替换原有的MUI Button，求一个简便的改造方案。

原组件代码：

import React from "react";
import Button from "@mui/material/Button";
import { ChangeEvent, ReactNode } from "react";

type Props = {
  onFileSelected?: (selectedFiles: File | File[]) => void;
  multiple?: boolean;
  children: ReactNode;
};

export const SelectFileButton: React.FC<Props> = ({
  children,
  onFileSelected = null,
  multiple = false,
}) => {
  const hiddenFileInput = React.useRef<HTMLInputElement>(null);

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files)
      onFileSelected?.( 
        multiple ? Array.from(e.target.files) : e.target.files[0]
      );
  };

  const handleClick = () => {
    hiddenFileInput.current!.click();
  };

  return (
    <React.Fragment>
      <Button onClick={handleClick}>{children}</Button> 
      <input
        type="file"
        ref={hiddenFileInput}
        style={{ display: "none" }}
        onChange={handleFileChange}
        multiple={multiple}
      />
    </React.Fragment>
  );
};

核心思路是通过让用户传入自定义触发元素，并利用React.cloneElement给该元素注入唤起文件选择的点击逻辑，同时保留元素自身的原有事件。

改造后的完整代码：

import React from "react";
import { ChangeEvent, ReactElement } from "react";

type Props = {
  onFileSelected?: (selectedFiles: File | File[]) => void;
  multiple?: boolean;
  // 接收用户传入的任意可点击元素
  trigger: ReactElement;
};

export const SelectFileTrigger: React.FC<Props> = ({
  trigger,
  onFileSelected = null,
  multiple = false,
}) => {
  const hiddenFileInput = React.useRef<HTMLInputElement>(null);

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files)
      onFileSelected?.( 
        multiple ? Array.from(e.target.files) : e.target.files[0]
      );
  };

  const handleTriggerClick = () => {
    hiddenFileInput.current!.click();
  };

  // 克隆用户传入的触发元素，合并点击事件
  const enhancedTrigger = React.cloneElement(trigger, {
    onClick: (e: React.MouseEvent) => {
      // 先执行用户原有点击逻辑（如果有的话）
      trigger.props.onClick?.(e);
      // 再唤起文件选择窗口
      handleTriggerClick();
    }
  });

  return (
    <React.Fragment>
      {enhancedTrigger}
      <input
        type="file"
        ref={hiddenFileInput}
        style={{ display: "none" }}
        onChange={handleFileChange}
        multiple={multiple}
      />
    </React.Fragment>
  );
};

关键改动说明 #

1. 新增trigger属性：将原有的固定MUI Button替换为用户自定义的触发元素，类型设为ReactElement确保可以通过cloneElement修改属性
2. 合并点击事件：通过React.cloneElement克隆触发元素，既保留用户原本设置的onClick逻辑，又添加唤起文件选择的行为
3. 移除硬编码的Button依赖：组件不再绑定MUI Button，彻底实现通用化
4. 组件重命名（可选）：将SelectFileButton改为SelectFileTrigger，更贴合通用组件的定位

使用示例 #

// 使用MUI IconButton作为触发元素
import IconButton from "@mui/material/IconButton";
import AttachFileIcon from "@mui/icons-material/AttachFile";

<SelectFileTrigger
  trigger={<IconButton><AttachFileIcon /></IconButton>}
  onFileSelected={(files) => console.log(files)}
/>

// 使用自定义按钮作为触发元素
<SelectFileTrigger
  trigger={<div className="custom-select-btn">点击选择文件</div>}
  multiple
  onFileSelected={(files) => console.log(files)}
/>

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