在React中实现自定义文件输入与路径显示

import React, { useState } from 'react';

function DataExtractor() {
  // 状态管理，用于存储选定的文件
  const [selectedFile, setSelectedFile] = useState(null);

  // 定义一个函数，当自定义按钮被点击时，触发隐藏的文件输入框的点击事件
  const uploadFiles = () => {
    // 通过ID获取到隐藏的文件输入框，并调用其click方法
    document.getElementById('selectFile').click();
  };

  return (
    <>
      <div>
        <label htmlFor="outputPath">Set Output Path:</label>
        {/* 文本输入框，用于显示文件名称 */}
        <input
          id="outputPath"
          value={selectedFile ? selectedFile.name : ''} // 初始为空，选中文件后显示文件名
          type="text"
          placeholder="Set output path"
          readOnly // 通常设置为只读，因为它是显示而非用户输入
        />
      </div>
      <div>
        {/* 自定义按钮，用于触发文件选择 */}
        <button className="btn-1" onClick={uploadFiles}>
          Browse path
        </button>
        {/* 隐藏的原生文件输入框 */}
        <input
          type="file"
          id="selectFile"
          style={{ display: 'none' }} // 关键CSS，隐藏元素
          // onChange 事件将在文件被选中后触发
        />
      </div>
    </>
  );
}

export default DataExtractor;

import React, { useState } from 'react';

function DataExtractor() {
  const [selectedFile, setSelectedFile] = useState(null);

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

  // 文件选择事件处理函数
  const handleFileChange = (e) => {
    // 检查是否有文件被选中
    if (e.target.files && e.target.files[0]) {
      // 更新状态为选中的第一个文件对象
      setSelectedFile(e.target.files[0]);
    } else {
      // 如果没有文件被选中（例如用户取消了选择），则清空状态
      setSelectedFile(null);
    }
  };

  return (
    <>
      <div>
        <label htmlFor="outputPath">Set Output Path:</label>
        <input
          id="outputPath"
          // 显示文件名称。如果selectedFile为null，则显示空字符串
          value={selectedFile ? selectedFile.name : ''}
          type="text"
          placeholder="Set output path"
          readOnly
        />
      </div>
      <div>
        <button className="btn-1" onClick={uploadFiles}>
          Browse path
        </button>
        <input
          type="file"
          id="selectFile"
          style={{ display: 'none' }}
          onChange={handleFileChange} // 将 onChange 事件绑定到处理函数
        />
      </div>
    </>
  );
}

export default DataExtractor;

import React, { useState } from 'react';

function DataExtractor() {
  // 使用useState Hook管理选中的文件状态，初始值为null
  const [selectedFile, setSelectedFile] = useState(null);

  /**
   * @description 触发隐藏的文件输入框的点击事件。
   * 当用户点击自定义的“Browse path”按钮时，此函数会被调用，
   * 从而间接打开文件选择对话框。
   */
  const uploadFiles = () => {
    // 通过ID获取到原生文件输入框的DOM元素，并调用其click()方法
    document.getElementById('selectFile').click();
  };

  /**
   * @description 处理文件选择事件。
   * 当用户在文件选择对话框中选择文件后，此函数会被触发。
   * @param {Object} e - 事件对象，其中e.target.files包含了选中的文件列表。
   */
  const handleFileChange = (e) => {
    // 检查e.target.files是否存在且至少包含一个文件
    if (e.target.files && e.target.files[0]) {
      // 将选中的第一个文件对象存储到selectedFile状态中
      setSelectedFile(e.target.files[0]);
    } else {
      // 如果用户取消了文件选择（即没有文件被选中），则清空selectedFile状态
      setSelectedFile(null);
    }
  };

  return (
    <>
      {/* 外部容器，包含标签和文本输入框 */}
      <div>
        {/* 标签，与文本输入框关联，提升可访问性 */}
        <label htmlFor="outputPath">Set Output Path:</label>
        {/* 文本输入框，用于显示选中的文件名称 */}
        <input
          id="outputPath" // 关联标签
          // 根据selectedFile状态显示文件名。如果selectedFile为null，则显示空字符串。
          value={selectedFile ? selectedFile.name : ''}
          type="text"
          placeholder="Set output path"
          readOnly // 设置为只读，防止用户手动输入路径，因为此框仅用于显示
        />
      </div>
      {/* 外部容器，包含自定义按钮和隐藏的文件输入框 */}
      <div>
        {/* 自定义按钮，用户点击此按钮来触发文件选择 */}
        <button className="btn-1" onClick={uploadFiles}>
          Browse path
        </button>
        {/* 隐藏的原生文件输入框 */}
        <input
          type="file"
          id="selectFile" // 确保ID唯一，以便通过document.getElementById访问
          style={{ display: 'none' }} // 关键样式，使原生文件输入框不可见
          onChange={handleFileChange} // 绑定文件选择事件处理函数
          // 可以添加 accept 属性来限制文件类型，例如 accept=".pdf,.doc"
          // 可以添加 multiple 属性来允许选择多个文件，例如 multiple
        />
      </div>
    </>
  );
}

export default DataExtractor;