如何让用户添加更多的输入字段?
然后如何以编程方式将值存储到嵌套在对象状态上的数组中?
该ideia是让用户添加输入(类型=文件)添加更多的地方。每个地方必须只有两张照片和它的地址。每次用户点击添加一个新的地方,两个输入和一个输入的地址必须显示。
export interface Data {
client: string;
data: string;
photos: Place[];
}
export interface Place{
photo_1: string;
photo_2: string;
address: string;
}
const [data, setData] = useState<Data>({
client: "",
date: Date.now(),
photos: [],
});
function handleChange(e) {
/* if (name === "photo_1") {
return setData((prev) => ({
...prev,
photos: [...prev.photos, { photo_1: value, photo_2: value, address: "" }],
}));
} */
setData((prev) => ({
...prev,
[name]: value,
}));
}
function Form() {
return (
<form onSubmit={handleSubmit}>
<div className="inputs">
<div>
<label htmlFor="client">Client</label>
<input
id="client"
type="text"
name="client"
onChange={handleChange}
/>
</div>
<div>
<label htmlFor="date">Date</label>
<input
id="date"
type="date"
name="date"
onChange={handleChange}
/>
</div>
<div>
<label>Place</label>
<div key={index}>
<input
type="file"
name="photo_1"
onChange={handleChange}
/>
<input
type="file"
name="photo_2"
onChange={handleChange}
/>
<label htmlFor="address">Local address</label>
<input type="text" name="address" />
</div>
<button> // must add a copy of that div above
Add place
</button>
</div>
</div>
<button>Submit</button>
</form>
)
}
1条答案
按热度按时间vbopmzt11#
您需要在react中创建动态输入字段,然后将文件推入其状态。
例如:
1.创造动态场-
const addMoreField =(e,index)=〉{ let newData ={ otherData:'',file:null } setOurState([...ourState,newData])}
1.创建一个数组,其状态为-
const initialState = { otherData:'';file:null } const [ourState,setOurState] = useState([initialState])
试试这个代码,让我知道它是否工作,如果你仍然面临着一个问题,只是让我知道。我会帮助你。