在反应打字稿中指定文件上传事件的类型答案

【问题标题】：Specify type for file upload event in react typescript在反应打字稿中指定文件上传事件的类型
【发布时间】：2019-12-19 19:26:23
【问题描述】：

我不太明白事件类型是如何工作的，我想在这里指定一个类型，但不太清楚如何去做。我似乎找不到这个特定案例的类型参考。

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。

【问题讨论】：

标签： reactjs typescript events types

【解决方案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}/>

【讨论】：

【解决方案2】：

您输入的 onChange 的事件参数实际上是 react 的合成事件。

React 对象上存在 React 合成事件类型（假设您已经安装了 react 类型）。

(event: React.FormEvent<HTMLInputElement>)

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

【讨论】：

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