입력 파일 상태에 대한 정의 유형: 반응+타입스크립트

입력 파일 상태에 대한 정의 유형: 반응+타입스크립트

파일 개체 내부 상태의 유형을 정의하는 동안 다음 오류가 발생합니다. 기본적으로 파일을 선택하고 값을 상위 구성 요소로 전송하는 작업을 수행하는 업로드 구성 요소가 있습니다. 나는 이것을 타이프스크립트 방식으로 시도하고 있는데 이것을 없앨 수가 없다.

샌드박스 링크:

업로드

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",
  AllImages = "image/*",
  AllVideos = "video/*",
  AllAudios = "audio/*"
}

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

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

  const onUpload = () => {
    // eslint-disable-next-line no-console
    console.log(selectedFiles);
  };

  return (
    <>
      <Button
        variant="contained"
        component="label"
        style={{ textTransform: "none" }}
      >
        <input
          hidden
          type="file"
          accept={acceptedFormats}
          onChange={handleFileSelect}
        />
        <span> Choose file to upload</span>
      </Button>
      <Button
        color="primary"
        disabled={!selectedFiles}
        style={{ textTransform: "none" }}
        onClick={onUpload}
      >
        Upload
      </Button>
    </>
  );
};

누가 도와줄 수 있나요?

---

다음 사항을 준수해야 합니다:

const [selectedFiles, setSelectedFiles] = useState<File | undefined>(undefined);

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

설정할 때 값에 유형이 포함되기 때문입니다.

이렇게 하면 값이 정의되지 않을 수 있으므로 사용하기 전에 값을 확인해야 합니다.

파일이 있을 경우 다음과 같이 주장을 사용할 수 있습니다:

setSelectedFiles(event?.target?.files?.[0]!);

형식은 로 유지하지만 자바스크립트()에서 약간 특이하기 때문에 여전히 사용합니다.