目前的情况：我有一个动态表单，我使用ReactJS，所以你可以添加/删除表单的部分，我无法预测将有多少部分。我说的是部分而不是输入，因为表单由不同的部分（div）组成，包含几个输入。所有div都包含相同数量的输入，用于相同的目的（您可以在下面找到一个示例）。
我现在需要提交表格。在使用常规旧JavaScript创建应用程序时，我只是将输入值提交到php文件（通过声明表单中的方法和操作），然后我将数据保存到XML或JSON文件（到目前为止）我只做过非常小规模的应用，所以这就足够了）。以这种方式提交动态表单非常简单，我尝试对此表单使用相同的方法，但是，它不起作用。我读到了关于反应js的ajax请求如何形成，但在我看到的所有示例中，它们都像这样声明了该请求中的数据：
data: {
“form_name”: this.state.contactName,
“form_email”: this.state.contactEmail,
“form_msg”: this.state.contactMessage
},
我不认为这会在我的实例中起作用，因为我无法预测输入量。
以下是我的一些代码：
呈现单个div的子组件：
export default class FormPart extends React.Component {
render() {
return(
<div className="formpart">
<label>Title</label>
<input type="text" placeholder={this.props.header} />
<textarea className="content" placeholder={this.props.content}></textarea>
<DeleteButton onClick={this.handleClick}/>
</div>
</div>
);
}
}
呈现子项并添加动态功能的父组件：
function createData(header, content) {
id += 1;
return {header, content, id};
}
class ExampleForm extends React.Component {
constructor(props) {
super(props);
this.addItem = this.addItem.bind(this);
this.state = {
data : [
createData( Header1, Content1),
createData( Header2, Content2),
createData( Header3, Content3),
],
newdata : createData( "Enter a title", "Enter some content"),
}
}
addItem() {
this.state.data.push(this.state.newdata);
this.setState(this.state);
this.state
}
deleteClick(n) {
for(var i=0; i<this.state.data.length; i++) {
if(this.state.data[i] === n) {
delete this.state.data[i]
}
}
this.setState({
data: this.state.data
});
}
handleSubmit() {
alert("I don't know what to do");
}
render () {
let { data }= this.state;
return(
<form>
{data.map((n, v) => {
return(
<Part key={"item_" + v} handledClick={this.deleteClick.bind(this, n)} header={n.header} content={n.content} />
);
})}
<AddButton addElement={this.addItem}/>
</form>
);
}
我真的不知道从哪里开始。我想，如果我可能找到一种方法来保存我的数据数组中的状态的新输入，我可以使用ajax请求保存该数组，但我不知道如何以及如果这是一个很好的方法做到这一点。 令人惊讶的是，我发现很少有问题，博客文章等与我的相似，其中很少有帮助，即使你认为这是一个更大的话题。
无论如何，总结一下：我可以在技术上像以前一样提交我的表格吗？如果你，那会是一个“好”的解决方案还是坏的做法？还有其他方法吗？