有這樣input的type='file'屬性：
function TestComp() {
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const [file] = e.target.files;
//...
};
return <input type='file' onChange={onChange}/>
}
得到錯誤：
鍵入“檔案串列 | null' 必須有一個回傳 iterator.ts(2488) 的 'Symbol.iterator' 方法
e.target.filesTS 型別為：
interface HTMLInputElement extends HTMLElement {
/**
* Returns a FileList object on a file type input object.
*/
files: FileList | null;
}
在什么情況下，e.target.files可能是null？
uj5u.com熱心網友回復：
這就是 的行為，如果未設定為，HTMLFileElement則回傳。nullfilestypefile
const fileInput = document.createElement('input');
fileInput.files // null
fileInput.type = "file"
fileInput.files // FileList
uj5u.com熱心網友回復：
我試圖以一種不同的方式解決這個問題并且它有效
import React from 'react';
interface Event<T = EventTarget> {
target: T;
}
export default function FileUploadPage() {
const changeHandler = (event: React.ChangeEvent<HTMLInputElement>): void => {
const target = event.target as HTMLInputElement;
const files = target.files;
console.log(files)
};
const handleSubmission = () => {
};
return (
<div>
<input type="file" name="file" multiple onChange={changeHandler} />
<div>
<button onClick={handleSubmission}>Submit</button>
</div>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522740.html
標籤：html反应打字稿dom