时间戳

首页 > 解决方案 > 为输入类型文件键入 onChange 处理程序的正确方法是什么？

javascript - 为输入类型文件键入 onChange 处理程序的正确方法是什么？

问题描述

几乎就像打字稿中的“EventTarget”类型错误中不存在属性“文件”

为输入类型文件键入 onChange 处理程序的正确方法是什么？

<input
        id="myInput"
        type="file"
        ref={inputEl}
        onChange={onChangeFile}
      />

///
const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    event.preventDefault();
    const files = Array.from(event.target.files);
    const arr = files.filter((file: any) => imageTypesRegExp.test(file.type));
  };

这会引发如下错误：

Property 'files' does not exist on type 'EventTarget'.

对于event.target.files和

Object is of type 'unknown'.

为了file.type

标签： javascriptreactjstypescript

解决方案

免责声明：我不熟悉 React/ReactJS，所以我只使用 DOMEvent接口。

  • 您需要将event.target（或event.currentTarget）转换为HTMLInputElement.
  • 这是因为Event接口不是泛型的（所以不能指定or的类型）。targetcurrentTarget

像这样：

const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    event.preventDefault();
    const input = event.target as HTMLInputElement; // <-- here
    const files = Array.from(input.files);
    const arr   = files.filter((file: any) => imageTypesRegExp.test(file.type));
};

顺便说一句，如果您想按 MIME 类型或文件扩展名过滤文件，则根本不需要此事件处理程序，而是使用<input accept="" />属性，如下所示：

  • 仅 JPEG 和 PNG 图像：

    <input type="file" accept="image/jpeg, image/png" />

  • 任何图像：

    <input type="file" accept="image/*" />

  • 只有视频：

    <input type="file" accept="video/*" />

推荐阅读