請先檢查我的代碼。
const test = () => {
const [files, setFiles] = useState ([]);
//I think I have to edit following statement.
const handleFile = (e) => {
const newFiles = []
for (let i=0; i < e.target.files.length; i ) {
newFiles.push(e.target.files[i])
}
setFiles(newFiles)
};
return (
{files.map((file, index) => (
<div>
<div key={index}>
<p>
{file.name}
</p>
<Button size='small' onClick={() => {deleteSelectedFile(file.name)}}>
Delete
</Button>
</div>
</div>
))}
<div>
<label onChange={handleFile}>
<input type='file' multiple /> Attach File
</label>
</div>
)
}
使用 handleFile 陳述句，我可以適當地獲取檔案。
但是，當我一次上傳一個檔案然后再次上傳一個檔案時，
該檔案未添加。檔案替換檔案。
一次上傳多次沒有問題。
例如，我上傳了“hello.jpg”，它在螢屏上呈現得很好。然后，我上傳了“goodbye.jpg”，它渲染得很好，但是“goodbye.jpg”替換了“hello.jpg”。
因此，我看到的只是 'goodbye.jpg' [button]，而不是
'hello.jpg' [按鈕] '再見.jpg' [按鈕]
.
我希望我的檔案堆積起來，而不需要替換。
我需要一些智慧！
uj5u.com熱心網友回復：
在我看來，您只需要在更改事件期間傳播上一個狀態值和檔案。
import { useState } from "react";
export default function App() {
const [files, setFiles] = useState([]);
const handleChange = (e) => {
// This is what you need
setFiles((prev) => [...prev, ...Object.values(e.target.files)]);
};
return (
<div>
<label onChange={handleChange}>
<input type="file" multiple />
</label>
{files.map((file) => {
return <p>{file.name}</p>;
})}
</div>
);
}
uj5u.com熱心網友回復：
您不為新檔案創建新變數如何，您只需設定檔案的狀態，因為它是一個陣列
setFiles(oldFile => [...oldFile,e.target.files[i]]);
如果可能，您可以洗掉 codepen 鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392459.html
標籤：javascript 反应 文件 下一个.js
上一篇：如何從輸入名稱和值對創建JSON
下一篇：TypeError:nullisnotanobject(evaluating'daysData.map')-試圖映射物件陣列