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

Question

目前的情况：我有一个动态表单，我使用 ReactJS 制作的，所以你可以添加/删除表单的一部分，我无法预测会有多少部分。我说的是部分而不是输入，因为表单由包含多个输入的不同部分（div）组成。所有 div 都包含相同数量的用于相同目的的输入（您可以在下面找到一个示例）。

我现在需要提交表单。在使用常规的旧 JavaScript 制作应用程序时，我只是将输入值提交到 php 文件（通过在表单中​​声明方法和操作），然后我将数据保存到 XML 或 JSON 文件中（直到现在我只做了非常小规模的应用程序，所以这就足够了）。以这种方式提交动态表单非常简单，我尝试对此表单使用相同的方法，但是它不起作用。我读到了如何响应 js 表单的 ajax-requests，但是在我看到的所有示例中，它们都在该请求中声明了数据，如下所示：

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