Reactjs 如何在react中的按钮单击上添加动态表单？

我正在制作一个react应用程序，每当点击按钮时，我都需要添加一个表单。目前，我正在增加一个计数器，并根据计数器中的数字显示表格。但我需要提交所有表格，并通过单击一个按钮获取数据，但我必须提交每个表格，并获取特定表格的数据。如何解决此问题

以下是我显示表单的方式：

var HocAddForm = function(AbstractComponent,title){
return class extends React.Component {
constructor(props){
  super(props);
  this.state={
    anotherForm:1
  }
  this.newForm=this.newForm.bind(this);
}
newForm(){
  this.setState({
    anotherForm:this.state.anotherForm+1
  })
}
displayForm(){
   let forms = [];
   for(let i = 0; i < this.state.anotherForm; i++){
     forms.push(
     <div key={i}>
         <AbstractComponent/>
     </div>
    )
   }
   console.log(this.state.value);
   return forms || null;
}

render() {
  const anotherForm=this.state.anotherForm;
  const heading=title;
  return(
    <div>
      <button id="add-button" onClick={this.newForm}>AddForm</button>
      <h3 className="form-place">{heading}</h3>
      {this.displayForm()}
    </div>
  )
}
}
}

---

在本例中，我将使用state，将窗体保持为节点数组，单击“向数组添加新组件”，然后在“渲染到数组上的简单贴图”

伪代码：

state = {
 forms: []
}

onClickMethod () => {
 this.setState(state=> state.forms.push(<Experience />))
}

render() {
 return (
  ...
  <form className="forms" onSubmit={this.onSubmit}> //your container
   this.state.forms.map(item => <item />)
  </form>
 )
}

状态={
表格：[]
}
onClickMethod（）=>{
this.setState（state=>state.forms.push（））
}
render（）{
返回(
...
//你的容器
this.state.forms.map（项=>）
)
}

在本例中，我将使用state，将表单保持为节点数组，单击“将新组件添加到数组”，然后在“渲染到数组上的简单贴图”中

伪代码：

state = {
 forms: []
}

onClickMethod () => {
 this.setState(state=> state.forms.push(<Experience />))
}

render() {
 return (
  ...
  <form className="forms" onSubmit={this.onSubmit}> //your container
   this.state.forms.map(item => <item />)
  </form>
 )
}

状态={
表格：[]
}
onClickMethod（）=>{
this.setState（state=>state.forms.push（））
}
render（）{
返回(
...
//你的容器
this.state.forms.map（项=>）
)
}

问题是我需要用一个提交按钮保存所有表单数据。我希望这种方法不会这样做。那么我不会将它们作为单独的表单，只保留字段组，一个表单作为容器。您可以为每个组分配密钥，然后在您的逻辑中（actionCreator with redux thunk或redux saga）保存数据：）问题是我需要用一个提交按钮保存所有表单数据。我希望这种方法不会这样做……那么我不会将它们作为单独的表单，只保留字段组，并将一个表单作为容器。您可以为每个组分配密钥，然后在您的逻辑中（actionCreator with redux thunk或redux saga）保存您的数据：）