属性 'files' 类型 'EventTarget & HTMLTextAreaElement' 缺失

Question

我正在尝试在 MUI 输入字段的 onChange 事件上调用 React TypeScript 中的方法。

不幸的是，我在 onChange 上收到以下错误：

Type '(event: { target: { files: any[]; }; }) => void' is not assignable to type 'ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>'. Types of parameters 'event' and 'event' are incompatible. Type 'ChangeEvent<HTMLTextAreaElement | HTMLInputElement>' is not assignable to type '{ target: { files: any[]; }; }'. Types of property 'target' are incompatible. Type 'EventTarget & (HTMLTextAreaElement | HTMLInputElement)' is not assignable to type '{ files: any[]; }'. Property 'files' is missing in type 'EventTarget & HTMLTextAreaElement' but required in type '{ files: any[]; }'.

我正在尝试访问状态并稍后通过 onChange 调用该方法。

对你们来说也很重要的是，我在 React TypeScript 中的文件上传和保存方面没有太多经验，我的 API 在 JS 中它可以工作，但在 TypeScript 中不行我也经历了 100 个教程，但没有任何帮助我.

import axios from "axios";
import React from "react";
import { Input } from "@mui/material";
// export class FileUpload extends Component {
const FileUpload: React.FC = () => {
    
    const [selectedFile] = React.useState<Blob>(new Blob);
    // const [users] = React.useState<Blob | string>("");


    function onFileChange(event: { target: { files: any[]; }; }): void {
    // function onFileChange(event: { target: { files: any[]; }; }): void {
        React.useState({ selectedFile: event.target.files[0] });
    }

    // On file upload (click the upload button)
    async function onFileUpload() {
        // Create an object of formData
        const formData = new FormData();
        // Update the formData object
        formData.append(
            "File",
            selectedFile,
            selectedFile.text.toString()
        );
        // Details of the uploaded file
        console.log(selectedFile);
        // Request made to the backend api
        // Send formData object
        try {
            const responseData = await axios.post("https://localhost:7047/File/Upload", formData);
            console.log(responseData);
        } catch (ex) {
            console.log(ex);
        }
    }

    return (
        <div>
            <Input onChange={onFileChange} />
            <Input type="button" value="upload" onClick={onFileUpload} />
        </div>
    );
};
export default FileUpload;

Answer 1

Material UI 将 onChange 道具的类型声明为：

onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> | undefined

您可以通过将鼠标悬停在 onChange 上来发现它，您将看到报告的类型。

这意味着它处理文本区域或输入标签。这意味着您的事件处理程序也需要处理这两者。这里的问题是只有类型为 file 的 HTMLInputElement 才会有 files 属性.

并且在您的代码中，如果缺少 files，它将崩溃。

所以首先你需要正确声明事件类型：

function onFileChange(event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>): void {
  //...
}

那么在使用之前需要确保files 属性存在

function onFileChange(event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>): void {
    if ('files' in event.target) {
        React.useState({ selectedFile: event.target.files?.[0] });
    } 
}

现在您只能访问它存在的 files，如果它不是 null 或 undefined，您可以使用 ?. 仅钻取它。

Playground with no type errors

属性 'files' 类型 'EventTarget & HTMLTextAreaElement' 缺失

Property 'files' is missing in type 'EventTarget & HTMLTextAreaElement'

methods

input

typescript

reactjs

material-ui