动态添加输入表单字段问题reactjs

Question

I am trying to add one cascaded form(inner) field dynamically on click of a button +Add Content . The array for the field is getting updated but the view is still same.

However, when I try to add the outer field on click of a button +Add Heading dynamically its getting added with no issues. Below is the stackblitz url for reference. Thanks in advance.

https://stackblitz.com/edit/react-utjwsu?embed=1&file=index.js

Answer 1

You're only ever rendering one Content field, and the {this.AddContentInput} isn't valid syntax. You can edit the AddContentBox method to render all of the Content fields:

Original:

...
<FormGroup>
    <Label className="set-label-pos upload-img" for="Heading">Content</Label>
    <input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...

Replaced with:

...
{ this.AddContentFields(element) }
...

and

AddContentFields(element) {
  return element.Content.map(content => {
    return (
      <FormGroup>
        <Label className="set-label-pos upload-img" for="Heading">Content</Label>
          <input className="form-control" type="text"/>
        </FormGroup>
    );
  })
}

Here's an edited version of the app with my changes: https://stackblitz.com/edit/react-lcy2te

Answer 2

Your code is working fine and the state is updating perfectly. The problem is that the Content part is added only once in your code. I just used a function which you already added in it

{this.addContentTextBox(element.Content)}

Just replace the AddContentBox function with this:

 AddContentBox(){ return this.state.content.map((element,i)=>( <div className="header-content" key={i} > <div className="heading-content-wrapper"> <FormGroup> <Label className="set-label-pos upload-img" for="Heading">Heading</Label> <input className="form-control" type="text"/> </FormGroup> {this.addContentTextBox(element.Content)} {this.AddContentInput} <FormGroup> <Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button> </FormGroup> </div> </div> )) } 

You have the code in that file, but i think you forgot to add it in the function.

Hope it helps :)

Answer 3

You are mixing the content variable. In your function AddContentBox() you are using this.state.content.map(...)

this.state.content is an array of object like {Heading: '', Content: [{value: ''}]}

BUT in your function AddContentInput() your are pushing an object inside an object of this array contents[index].Content.push({value:''})

Depending on your needs you should either push in the root array contents.push({Heading: '', Content: [{value: ''}]} OR iterate the right array in your function AddContentBox() and use this.state.content[0].Content.map(...)