如何解决如何删除“输入类型文件文本字段”
我想要实现的是我希望允许用户上传尽可能多或有限的文件。要添加他可以随时添加“输入文件字段”。
一切正常,但是当我尝试删除它时。它不会删除提供的 SPECIDIC INDEX 或特定 ID 的“输入字段”,但它总是删除最后一个字段。
import React,{ useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [fields,setFields] = useState([{ files: null }]);
function handleChange(i,event) {
const values = [...fields];
values[i].files = event.target.[0];
console.log(values);
setFields(values);
}
function handleAdd() {
const values = [...fields];
values.push({ value: null });
setFields(values);
}
function handleRemove(i) {
const values = [...fields];
values.splice(i,1);
setFields(values);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button type="button" onClick={() => handleAdd()}>
+
</button>
{fields.map((field,idx) => {
return (
<div key={`${field}-${idx}`}>
<input
type="text"
defaultValue={field.files || ""}
onChange={(e) => handleChange(idx,e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
);
})}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);
解决方法
问题是地图 KEY 您应该使用特定的 id 而不是索引或文件对象,您可以在 uuid 包的示例下方找到。 >
示例:
import { useState } from "react";
import "./styles.css";
import { v4 as uuidv4 } from "uuid";
const App = () => {
const [fields,setFields] = useState([{ id: uuidv4(),files: "" }]);
function handleChange(i,event) {
setFields(
fields.map((input) =>
input.id === i ? { ...input,files: event.target.value } : input
)
);
}
function handleAdd() {
const values = [...fields];
values.push({ id: uuidv4(),files: "" });
setFields(values);
}
function handleRemove(idx) {
setFields(fields.filter((_,i) => i !== idx));
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button type="button" onClick={() => handleAdd()}>
+
</button>
{fields.map((field,idx) => {
return (
<div key={field.id}>
<input
type="text"
value={field.files}
onChange={(e) => handleChange(field.id,e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
);
})}
</div>
);
};
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。