在React TypeScript中指定文件上传事件的类型

Question

我不太理解事件类型是如何工作的，我想在这里指定一个类型，但无法弄清楚如何做到。 我似乎找不到这种特定情况的类型参考。

private handleChange (event /*:FileUplaodEvent or something */): void {
    this.setState ({
      csv: event.target.files[0],
    });
}

非常感谢任何帮助...

编辑：正如Mukesh Soni所回答的，我使用了React.FormEvent<HTMLInputElement>，但由于某种原因，此类型的文件接口与其他不同，实际上是：event.currentTarget.files而非event.target.files。

- Grigory Bogush

Answer 1

我试了接受的答案，但对我没有起作用。

如果你想要访问e.target.files或者e.currentTarget.files，你应该使用React.ChangeEvent<HTMLInputElement> 作为事件类型。

例子：

const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) {
      return;
    }

    // handle the input...
    console.log(e.target.files);
}


<Input type='file' onChange={handleChange}/>

- Sebastiaan

Answer 2

你的输入框onChange事件所接收到的参数实际上是React合成事件。

React合成事件类型可以在React对象上找到（假设你已经安装了react的类型定义）。

(event: React.FormEvent<HTMLInputElement>)

React.FormEvent 包含所有表单输入元素的合成事件。它是一种通用类型，即在使用时接受另一种类型作为参数。在您的情况下，该类型参数是 HTMLInputElement。这导致输入元素上的表单事件的完整类型。

- Mukesh Soni

---

我没有直接看到它，所以我在这里重复问题的编辑：'对于这种类型，文件的接口有点不同，实际上是：event.currentTarget.files而不是event.target.files。' - rü-

非常感谢，这是我的代码解决方案。 - Muhammad Rosyid