使用php在react js中提交动态表单

Question

目前的情况：我有一个动态表单，我使用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请求保存该数组，但我不知道如何以及如果这是一个很好的方法做到这一点。令人惊讶的是，我发现很少有问题，博客文章等与我的类似，其中很少有帮助，即使你认为这是一个更大的话题。

无论如何，总结一下：我可以在技术上像以前一样提交我的表格吗？如果你，那会是一个“好”的解决方案还是坏的做法？有没有其他方法可以做到这一点？

Answer 1

你当然应该从ajax提交这个表格，就像这个人在这里做的那样。 https://stackoverflow.com/a/44277888/6578201