React中点击自定义按钮打开文件选择器并回显文件名到输入框实现

浏览器端JavaScript没有直接唤起系统文件资源管理器的原生API，我们可以通过隐藏原生file输入框的方式满足「不显示原生file控件、自定义按钮触发选择、回显文件名」的需求，完全符合你的要求，原生file输入框不会暴露给用户，全程只用你提供的自定义按钮和显示用Input。

实现步骤 #

• 新增隐藏的input[type=file]元素，设置display: none完全不渲染到视图层
• 给自定义Browse按钮绑定点击事件，触发隐藏file输入框的click事件唤起系统资源管理器
• 监听隐藏file输入框的change事件，获取选中的文件名同步到显示用的Input组件
• 给显示用Input绑定受控状态，支持手动修改文件名（可选）

完整代码示例 #

（你的原始代码是React+Semantic UI React语法，以下为可直接运行的完整实现）

import { useState, useRef } from 'react';
import { Grid, Input, Button } from 'semantic-ui-react';

function YourComponent() {
  // 存储选中的文件名，同步到显示Input
  const [fileName, setFileName] = useState('');
  // 隐藏的file输入框的DOM引用
  const hiddenFileInputRef = useRef(null);

  const onButtonClick = () => {
    // 触发隐藏file输入框的选择逻辑，直接唤起Windows资源管理器
    hiddenFileInputRef.current?.click();
  };

  const onFileSelect = (e) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      // 将选中的文件名赋值给状态，同步到显示Input
      setFileName(selectedFile.name);
      // 如果后续需要读取文件内容，也可以在这里处理selectedFile对象
    }
    // 重置file输入框的值，避免重复选择同一个文件不触发change事件的问题
    e.target.value = '';
  };

  return (
    <Grid.Column width={8}>
      {/* 隐藏的原生file输入框，完全不会在页面显示 */}
      <input 
        type="file" 
        ref={hiddenFileInputRef} 
        onChange={onFileSelect} 
        style={{display: 'none'}} 
      />
      {/* 原有显示文件名的Input组件 */}
      <Input 
        placeholder='File Name - (automatically pick up from file)' 
        fluid 
        style={{marginBottom:'15px'}}
        value={fileName}
        onChange={(e) => setFileName(e.target.value)} // 不需要用户手动改文件名可以删掉这行
      />
      <Button 
        content='Browse files' 
        onClick={onButtonClick} 
        size='medium' 
        basic 
        color='blue' 
        icon='download'
      />
    </Grid.Column>
  )
}

如果你是在Electron等桌面端容器环境运行，可直接调用容器提供的dialog.showOpenDialogAPI实现，不需要借助隐藏file输入框；纯浏览器环境下上述方案是唯一合规的实现方式。

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