[英]React Forms : How to make input data as list objects with same input name?
I'm Posting input data to API's where the API's structure as array list with n objects.我将输入数据发布到 API,其中 API 的结构为具有 n 个对象的数组列表。
Problem: The problem I'm facing is while handling the change, i'm replacing the data instead of inserting as an another object.问题:我面临的问题是在处理更改时,我正在替换数据而不是作为另一个对象插入。
My code as follows:我的代码如下:
the objects in the list is dynamic not limited to two列表中的对象是动态的,不限于两个
in Constructor->在构造函数中->
this.state={
formData: [
{
information: "",
from: "",
to: "",
},
{
information: "",
from: "",
to: "",
},
],
}
handling the Change as follow:处理变更如下:
handleChange = (e) => {
const { name, value } = e.target;
const { formData} = this.state;
this.setState({
formData: {
...formData,
[name]: value,
},
});
Handle submit:处理提交:
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.formData);
}
Form fields as follows:表单字段如下:
<form onSubmit={this.handleSubmit}>
<div>
<input type="text" name="information" onChange={this.handleChange} />
<input type="text" name="from" onChange={this.handleChange} />
<input type="text" name="to" onChange={this.handleChange} />
</div>
<div>
<input type="text" name="information" onChange={this.handleChange} />
<input type="text" name="from" onChange={this.handleChange} />
<input type="text" name="to" onChange={this.handleChange} />
</div>
.
.
.
<button> + Add new Set (div) </button>
<button type="submit"> Submit </button>
</form>
I'm aware that mistake is handing logic but i tried lot to correct.我知道错误是处理逻辑,但我尝试了很多来纠正。 Please help me out.
请帮帮我。
Edit: Expected output:编辑:预期输出:
[
{
"information": "info 1",
"from": 1,
"to": 50
},
{
"information": "info 2",
"from": 51,
"to": 80
},
{
"information": "info 3",
"from": 81,
"to": 100
}
]
If you want to insert a third object to formData you need to add curly brackets {} to frame [name]:value
as an object.如果要向 formData 插入第三个对象,则需要将大括号 {} 添加到框架
[name]:value
作为对象。 Also formData
is an Array so it must be with square brackets not curly ones. formData
也是一个数组,所以它必须带有方括号而不是花括号。
this.setState({
formData: [
...formData,
{ [name]: value }
],
The best approach is to use prevState
in setState
.最好的方法是在
setState
使用prevState
。
this.setState(prevState => ({...prevState, [name]: value }))
This will guarantee that you always use the previous state.这将保证您始终使用以前的状态。
setState
is an async function, if you use formData
it will not guarantee that the changes that you already dispatch are in place to be used. setState
是一个异步函数,如果您使用formData
它不能保证您已经分派的更改就位可以使用。
state={
formData: [
{
information: "",
from: "",
to: "",
},
{
information: "",
from: "",
to: "",
},
],
information:"",
from:"",
to:""
}
...
<input type="text" name="information" onChange={(event)=>{this.setState({information:event.target.value})} />
<input type="text" name="from" onChange={(event)=>{this.setState({from:event.target.value})} />
<input type="text" name="to" onChange={(event)=>{this.setState({to:event.target.value})} />
...
handleSubmit = (e) => {
e.preventDefault()
const data={ information: this.state.information,
from: this.state.form,
to: this.state.to}
this.setState({formData:[this.state.formData,data]})
console.log(this.state.formData);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.