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

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.

Answer 1

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

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

(event: React.FormEvent<HTMLInputElement>)

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

Answer 2

接受的答案对我不起作用。

如果您想访问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}/>