如何将原生JS实现的自定义文件上传按钮迁移至React应用

以下是对应原生实现的React版本，保留完全一致的样式与功能：

1. React组件代码 #

import { useState } from 'react';
import './CustomFileUpload.css';

function CustomFileUpload() {
  const [fileChosen, setFileChosen] = useState('No file chosen');

  const handleFileChange = (e) => {
    setFileChosen(e.target.files.length > 0 ? e.target.files[0].name : 'No file chosen');
  };

  return (
    <div>
      <br />
      {/* 隐藏的原生文件输入框 */}
      <input
        type="file"
        id="actual-btn"
        hidden
        onChange={handleFileChange}
      />
      {/* 自定义上传按钮 */}
      <label htmlFor="actual-btn">Choose File</label>
      {/* 选中文件名显示 */}
      <span id="file-chosen">{fileChosen}</span>
    </div>
  );
}

export default CustomFileUpload;

2. 样式文件（CustomFileUpload.css） #

label {
  background-color: white;
  color: black;
  padding: 0.5rem;
  font-family: sans-serif;
  border: 2px solid black;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
  padding: 10px 55px;
}

#file-chosen {
  margin-left: 0.3rem;
  font-family: sans-serif;
}

核心实现说明 #

• 用React的useState钩子管理选中文件名的状态，替代原生DOM操作更新文本
• 直接通过onChange属性绑定文件选择事件处理函数，无需手动添加事件监听
• JSX中使用htmlFor替代原生HTML的for属性（避免与JavaScript关键字冲突）
• 样式完全复用原生实现的CSS代码，保证视觉效果完全一致

内容的提问来源于stack exchange，提问作者Anish Kuls