React中如何隐藏input标签，用Button触发文件上传功能？

可以通过以下几步实现，完全复用你现有文件读取的逻辑：

• 给文件上传Input添加ref，方便后续通过代码触发它的点击事件
• 给Input添加样式隐藏它
• 给自定义Button绑定点击事件，触发Input的文件选择弹窗
• 保留你原本的handleChange逻辑，不用修改

修改后的完整代码：

import React, { useState, useRef } from "react";
export function App() {
  const [files, setFiles] = useState("");
  // 创建ref关联到input元素
  const fileInputRef = useRef(null);

  const handleChange = e => {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0], "UTF-8");
    fileReader.onload = e => {
      console.log("e.target.result", e.target.result);
      setFiles(e.target.result);
    };
  };

  // 按钮点击时触发input的点击事件
  const handleButtonClick = () => {
    fileInputRef.current?.click();
  };

  return (
    <>
      <h1>Upload Json file - Example</h1>
      {/* 隐藏input，通过ref关联 */}
      <input 
        type="file" 
        onChange={handleChange} 
        ref={fileInputRef}
        style={{ display: 'none' }}
      />
      <br />
      {"uploaded file content -- " + files}
      <br />
      {/* 点击按钮触发文件选择 */}
      <button onClick={handleButtonClick}>Import file</button>
    </>
  );
}

关键说明：

• 使用useRef创建fileInputRef，用来获取到隐藏的input DOM元素
• 给input设置style={{ display: 'none' }}隐藏它，不影响页面布局
• 按钮的点击事件handleButtonClick里，调用fileInputRef.current?.click()触发文件选择弹窗，?.是可选链操作符，避免ref还没关联元素时报错
• 原有的handleChange逻辑完全保留，文件选择完成后依然会执行读取文件内容并更新状态的操作

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