React文件上传组件改造：实现选中文件后显示文件名

修改方案 #

要实现显示选中文件名，需在SelectFileButton组件中添加状态管理文件名称，并监听文件选择框的变化事件：

• 引入useState存储选中的文件名
• 添加文件变化处理函数，监听input的onChange事件获取文件名
• 在组件中渲染元素展示选中的文件名

修改后的完整代码 #

SelectFileButton组件

import { useState, useRef } from 'react';

export default function SelectFileButton() {
    const fileInput = useRef();
    // 存储选中文件名的状态
    const [selectedFileName, setSelectedFileName] = useState('');

    const selectFile = () => {
        fileInput.current.click();
    };

    // 处理文件选择变化
    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            setSelectedFileName(file.name);
        }
    };

    return (
        <div>
            <input 
                type="file" 
                style={{ display: "none" }} 
                ref={fileInput} 
                onChange={handleFileChange}
            />
            <Button onClick={selectFile} className='btn btn-primary' sx={styles.DispositionBottom}>
                <span>Upload</span>
            </Button>
            {/* 条件渲染选中的文件名 */}
            {selectedFileName && (
                <p style={{ marginTop: '8px', margin: 0 }}>
                    已选择文件：{selectedFileName}
                </p>
            )}
        </div>
    )
}

说明 #

• 用户选择文件后，handleFileChange会提取选中文件的名称并更新状态
• 通过条件渲染，仅当存在选中文件名时才展示文本，避免初始状态下的空内容
• 展示文本的样式可根据页面需求自行调整

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