如何将上传图标绑定到Material UI的文件上传Input组件

实现方案 #

核心思路是拆分「样式展示层」和「文件输入功能层」：保留MUI原生Input组件的所有样式（包括底部横线、标签、布局），单独隐藏真实的文件输入控件，通过关联标签触发文件选择。

完整代码示例

import { useState, useRef } from 'react';
import { FormControl, InputLabel, Input, InputAdornment, IconButton, makeStyles } from '@material-ui/core';
import PublishIcon from '@material-ui/icons/Publish';

const useStyles = makeStyles({
  formControl: {
    // 保留你原有formControl的样式即可
    margin: '8px 0',
    minWidth: 200,
  },
  hiddenFileInput: {
    display: 'none',
  },
  inputRoot: {
    // 避免文件名和右侧图标重叠，可根据需要调整
    paddingRight: 4,
  }
});

export default function FileUploadInput() {
  const classes = useStyles();
  const [selectedFileName, setSelectedFileName] = useState('');
  const hiddenFileInputRef = useRef(null);

  const handleFileSelect = (e) => {
    const file = e.target.files?.[0];
    if (file) {
      setSelectedFileName(file.name);
      // 此处添加你自己的文件处理逻辑
    }
  };

  return (
    <FormControl className={classes.formControl} fullWidth>
      <InputLabel htmlFor="sim-script-input">Sim Script</InputLabel>
      {/* 展示层Input，只负责保留样式和显示文件名 */}
      <Input
        id="sim-script-input"
        value={selectedFileName}
        readOnly
        classes={{ root: classes.inputRoot }}
        endAdornment={
          <InputAdornment position="end">
            <label htmlFor="hidden-file-upload">
              <IconButton aria-label="上传文件" component="span">
                <PublishIcon />
              </IconButton>
            </label>
          </InputAdornment>
        }
      />
      {/* 功能层文件输入，隐藏不展示，只负责触发文件选择 */}
      <input
        ref={hiddenFileInputRef}
        id="hidden-file-upload"
        type="file"
        className={classes.hiddenFileInput}
        onChange={handleFileSelect}
      />
    </FormControl>
  );
}

核心注意点

• 不要给MUI的Input组件设置display: none，否则会丢失底部横线、布局间距等原生样式
• 展示用的Input设置readOnly，避免用户手动编辑内容，仅用来展示选中的文件名
• IconButton外层套label标签关联隐藏的文件输入，点击图标就会自动触发文件选择弹窗，不需要额外写click事件

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