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

Posted 2023-03-13

【中文标题】为输入类型文件键入 onChange 处理程序的正确方法是啥？

【英文标题】：What's the correct way to type an onChange handler for input type files?为输入类型文件键入 onChange 处理程序的正确方法是什么？

【发布时间】：2020-11-24 04:38:48

【问题描述】：

几乎像Property 'files' does not exist on type 'EventTarget' error in typescript

为输入类型文件键入 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

【问题讨论】：

我不熟悉 React.js，所以请原谅这个问题，但是 onChange 是由 React.js 专门使用 addEventListener 连接起来的，还是使用老派HTML3-era onchange=""-style 事件属性？

React 有它自己的事件系统，我不确定内部结构。 reactjs.org/docs/events.html

【参考方案1】：

免责声明：我不熟悉 React/ReactJS，所以我只使用the DOM Event interface。

您需要将event.target（或event.currentTarget）转换为HTMLInputElement。 这是因为Event 接口不是通用的（所以不能指定the type of target 或currentTarget）。

像这样：

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 类型或文件扩展名instead use the <input accept="" /> attribute 过滤文件，则根本不需要此事件处理程序，如下所示：

仅 JPEG 和 PNG 图像：

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

任何图像：

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

只有视频：

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