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

差不多

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

对于

事件.target.files

和

Object is of type 'unknown'.

---

对于

文件.type

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

• 您需要将

  event.target

  （或

  event.currentTarget

  ）强制转换为

  HTMLInputElement

• 这是因为

  事件

  接口不是通用的（因此不能指定）

像这样：

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));
};

const onChangeFile=（事件：React.changevent）=>{
event.stopPropagation（）；
event.preventDefault（）；
const input=event.target作为HTMLInputElement；//imageTypesRegExp.test（file.type））；
};

---

另外，如果要按MIME类型或文件扩展名筛选文件，则根本不需要此事件处理程序，如下所示：

• 仅JPEG和PNG图像：

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

• 任何图像：

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

• 仅视频：

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

---

我不熟悉React.js，所以请原谅这个问题，但是React.js是否专门使用了

addEventListener

，或者它使用的是老式的HTML3时代

onChange=“”

）样式的事件属性？React有自己的事件系统，我不确定其内部结构。

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