Material-UI按钮点击无法打开文件选择框，如何修复？

你的问题出在把隐藏的文件输入框直接嵌套在Material-UI Button组件内部——Button会优先拦截点击事件，导致内部的input[type="file"]没被触发，所以弹不出选择框。这里给你两种简单的修复方案：

方案1：手动触发文件输入框的点击事件 #

给文件输入框加个ref，然后在Button的点击事件里手动调用它的click()方法：

import { useRef } from 'react';

// 组件内部定义ref和点击处理函数
const fileInputRef = useRef(null);

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

// 修改后的InputProps代码
InputProps={{
    endAdornment: (
        <InputAdornment position="end" style={{height: '24px'}}>
            <Button size={'medium'} onClick={triggerFileSelect}>
                Attach +
                <input
                    ref={fileInputRef}
                    onChange={handleFile}
                    type="file"
                    hidden
                />
            </Button>
        </InputAdornment>
    )
}}

方案2：将Button渲染为label标签（更简洁） #

利用HTML label标签的特性——点击label会自动触发对应id的输入框。把Material-UI Button的component属性设为label，再给文件输入框加个id即可：

InputProps={{
    endAdornment: (
        <InputAdornment position="end" style={{height: '24px'}}>
            <Button size={'medium'} component="label">
                Attach +
                <input
                    id="attach-file"
                    onChange={handleFile}
                    type="file"
                    hidden
                />
            </Button>
        </InputAdornment>
    )
}}

两种方案都能解决问题，方案2更符合HTML原生逻辑，代码也更简洁。

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A