React/TypeScript文件上传组件：优化清除操作的用户体验

import * as React from "react";
import { Button } from "@material-ui/core";
import { useState } from "react";

// 定义上传组件的属性接口
interface UploaderProps {
  fileType?: string | AcceptedFileType[]; // 允许指定接受的文件类型
}

// 定义可接受的文件类型枚举
enum AcceptedFileType {
  Text = ".txt",
  Gif = ".gif",
  Jpeg = ".jpg",
  Png = ".png",
  Doc = ".doc",
  Pdf = ".pdf",
  AllImages = "image/*",
  AllVideos = "video/*",
  AllAudios = "audio/*"
}

export const Upload = (props: UploaderProps) => {
  const { fileType } = props;
  // 根据传入的fileType属性生成input的accept属性值
  const acceptedFormats: string | AcceptedFileType[] =
    typeof fileType === "string"
      ? fileType
      : Array.isArray(fileType)
      ? fileType?.join(",")
      : AcceptedFileType.Text;

  // 使用useState钩子管理选中的文件
  const [selectedFiles, setSelectedFiles] = useState<File | undefined>(
    undefined
  );

  // 文件选择处理函数
  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedFiles(event?.target?.files?.[0]);
  };

  // 上传操作处理函数（此处仅为示例，可扩展为实际文件上传逻辑）
  const onUpload = () => {
    console.log("Selected file for upload:", selectedFiles);
    // 在此处添加实际的文件上传API调用
  };

  return (
    <>
      <Button
        variant="contained"
        component="label" // 将Button渲染为label元素
        style={{ textTransform: "none" }}
      >
        <input
          hidden // 隐藏原生的input元素
          type="file"
          accept={acceptedFormats} // 设置可接受的文件类型
          onChange={handleFileSelect} // 监听文件选择事件
        />
        {/* 根据selectedFiles状态动态显示不同的UI */}
        {!selectedFiles?.name && <span> 选择文件上传</span>}
        {selectedFiles?.name && (
          <>
            <span style={{ float: "left" }}> {selectedFiles?.name}</span>
            <span style={{ padding: "10px" }}> 更改</span>
            {/* 清除按钮，此处是问题的关键点，将在下一节解决 */}
            <span onClick={() => setSelectedFiles(undefined)}>清除</span>
          </>
        )}
      </Button>
      <Button
        color="primary"
        disabled={!selectedFiles} // 没有选中文件时禁用上传按钮
        style={{ textTransform: "none" }}
        onClick={onUpload}
      >
        上传
      </Button>
    </>
  );
};

// 修改后的清除按钮
<span
  onClick={(e) => {
    e.preventDefault(); // 阻止事件的默认行为
    setSelectedFiles(undefined); // 清空选中的文件
  }}
>
  清除
</span>

import * as React from "react";
import { Button } from "@material-ui/core";
import { useState } from "react";

interface UploaderProps {
  fileType?: string | AcceptedFileType[];
}

enum AcceptedFileType {
  Text = ".txt",
  Gif = ".gif",
  Jpeg = ".jpg",
  Png = ".png",
  Doc = ".doc",
  Pdf = ".pdf",
  AllImages = "image/*",
  AllVideos = "video/*",
  AllAudios = "audio/*"
}

export const Upload = (props: UploaderProps) => {
  const { fileType } = props;
  const acceptedFormats: string | AcceptedFileType[] =
    typeof fileType === "string"
      ? fileType
      : Array.isArray(fileType)
      ? fileType?.join(",")
      : AcceptedFileType.Text;
  const [selectedFiles, setSelectedFiles] = useState<File | undefined>(
    undefined
  );

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedFiles(event?.target?.files?.[0]);
  };

  const onUpload = () => {
    console.log("Selected file for upload:", selectedFiles);
    // 在此处添加实际的文件上传API调用
  };

  return (
    <>
      <Button
        variant="contained"
        component="label"
        style={{ textTransform: "none" }}
      >
        <input
          hidden
          type="file"
          accept={acceptedFormats}
          onChange={handleFileSelect}
        />
        {!selectedFiles?.name && <span> 选择文件上传</span>}
        {selectedFiles?.name && (
          <>
            <span style={{ float: "left" }}> {selectedFiles?.name}</span>
            <span style={{ padding: "10px" }}> 更改</span>
            <span
              onClick={(e) => {
                e.preventDefault(); // 阻止默认行为
                setSelectedFiles(undefined);
              }}
            >
              清除
            </span>
          </>
        )}
      </Button>
      <Button
        color="primary"
        disabled={!selectedFiles}
        style={{ textTransform: "none" }}
        onClick={onUpload}
      >
        上传
      </Button>
    </>
  );
};