React中自定义文件输入框并显示选定文件路径

import React, { useState } from 'react';

function DataExtractor() {
  // 用于存储选定文件名的状态
  const [selectedFileName, setSelectedFileName] = useState('');

  // 模拟点击隐藏文件输入框的函数
  const uploadFiles = () => {
    document.getElementById('selectFile').click();
  };

  return (
    <>
      <div>
        <label htmlFor="outputPath">设置输出路径:</label>
        {/* 文本输入框，用于显示选定的文件名 */}
        <input
          id="outputPath"
          type="text"
          placeholder="请选择文件..."
          value={selectedFileName} // 绑定状态
          readOnly // 通常设置为只读，防止用户手动输入
        />
      </div>
      <div>
        {/* 自定义按钮，触发文件选择 */}
        <button className="btn-1" onClick={uploadFiles}>
          浏览路径
        </button>
        {/* 隐藏的原生文件输入框 */}
        <input
          type="file"
          id="selectFile"
          style={{ display: 'none' }}
          // 文件选择后触发的事件
          // onChange={handleFileChange} // 稍后添加此处理器
        />
      </div>
    </>
  );
}

export default DataExtractor;

import React, { useState } from 'react';

function DataExtractor() {
  const [selectedFileName, setSelectedFileName] = useState('');

  const uploadFiles = () => {
    document.getElementById('selectFile').click();
  };

  // 处理文件选择变化的函数
  const handleFileChange = (e) => {
    // e.target.files 是一个 FileList 对象，包含所有选定的文件
    // 通常我们只关心第一个文件 (e.target.files[0])
    const file = e.target.files[0];
    if (file) {
      setSelectedFileName(file.name); // 更新状态为文件的名称
    } else {
      setSelectedFileName(''); // 如果没有选择文件，则清空状态
    }
  };

  return (
    <>
      <div>
        <label htmlFor="outputPath">设置输出路径:</label>
        <input
          id="outputPath"
          type="text"
          placeholder="请选择文件..."
          value={selectedFileName}
          readOnly
        />
      </div>
      <div>
        <button className="btn-1" onClick={uploadFiles}>
          浏览路径
        </button>
        <input
          type="file"
          id="selectFile"
          style={{ display: 'none' }}
          onChange={handleFileChange} // 将事件处理器绑定到 onChange
        />
      </div>
    </>
  );
}

export default DataExtractor;

import React, { useState } from 'react';

/**
 * DataExtractor 组件用于演示如何自定义文件输入框并显示选定的文件名。
 */
function DataExtractor() {
  // 使用 useState Hook 来管理选定的文件名。
  // 初始状态为空字符串。
  const [selectedFileName, setSelectedFileName] = useState('');

  /**
   * uploadFiles 函数：
   * 当“浏览路径”按钮被点击时，此函数会被调用。
   * 它通过 JavaScript 编程方式地触发隐藏的 <input type="file"> 元素的点击事件，
   * 从而打开文件选择对话框。
   */
  const uploadFiles = () => {
    document.getElementById('selectFile').click();
  };

  /**
   * handleFileChange 函数：
   * 当用户在隐藏的文件输入框中选择文件后，此函数会被调用。
   * @param {Object} e - 事件对象，其中包含文件信息。
   */
  const handleFileChange = (e) => {
    // e.target.files 是一个 FileList 对象，包含了用户选择的所有文件。
    // 通常，我们只关心第一个文件 (e.target.files[0])。
    const file = e.target.files[0];

    if (file) {
      // 如果用户选择了文件，则更新 selectedFileName 状态为文件的名称。
      // 注意：出于安全考虑，浏览器不会提供文件的完整路径，只能获取文件名。
      setSelectedFileName(file.name);
    } else {
      // 如果用户取消了文件选择，或者没有选择任何文件，则清空文件名。
      setSelectedFileName('');
    }
  };

  return (
    <>
      {/* 第一个 div 包含一个标签和一个文本输入框，用于显示选定的文件名。 */}
      <div>
        <label htmlFor="outputPath">设置输出路径:</label>
        <input
          id="outputPath"
          type="text"
          placeholder="请选择文件..."
          value={selectedFileName} // 将文本输入框的值绑定到 selectedFileName 状态。
          readOnly // 将输入框设置为只读，防止用户手动修改文件名。
          className="output-path-input" // 可以添加自定义 CSS 类进行样式化
        />
      </div>

      {/* 第二个 div 包含一个自定义按钮和隐藏的文件输入框。 */}
      <div>
        {/* 自定义按钮：当点击时，触发文件选择对话框。 */}
        <button className="btn-1" onClick={uploadFiles}>
          浏览路径
        </button>

        {/* 隐藏的原生文件输入框：
            - type="file" 使其成为文件选择器。
            - id="selectFile" 用于通过 JavaScript 获取该元素。
            - style={{ display: 'none' }} 隐藏该元素，使其不可见。
            - onChange={handleFileChange} 绑定文件选择事件处理器。
        */}
        <input
          type="file"
          id="selectFile"
          style={{ display: 'none' }}
          onChange={handleFileChange}
        />
      </div>
    </>
  );
}

export default DataExtractor;