React：动态添加字段

Question

I have a class in which I should add dynamically fields when the user click on "Add Button" or delete the fields if the user click on the "Remove Button".

export default class myClass extends Component
{
  constructor(props){
    super(props);
  }
Fields = [
    {
      name: '$ClassName',
      fields: [
        {
          name: 'ClassName.FirstField',
          col: ["lg-6", 'md-6', 'sm-12'],
          required: true,
          label: "First Field"
        }
        ]
    },
  ]

render()
  {
    const self = this
    return(
      <Column col={'12'} className="mt-2 mb-2">
        <Row>

          {
            this.Fields.map((group, i) => (

              <Column key={`${group.name}_i`} col="12" className="mt-4 mb-2 form-fields-wrap">

                <h5 className="form-section-title">{group.label}</h5>
                <Row>
                  
                  {
                    Start.renderFieldsGroup(group.fields, group.name, this.props.preview)
                  }
                </Row>
              </Column>

            ))
          }
        </Row>
      </Column>
    )
  }

Now I should create the possibility to add (and remove) the Fields array when an user click on Add Button (or Remove Button).

How can I do to add dynamically add this field?

EDIT:

export default class myClass extends Component
{
  constructor(props){
    super(props);
 this.state = { inputs: ['input-0'] };
  }

tryFunction(){
    
    const self = this
    return(
      <Column col={'12'} className="mt-2 mb-2">
        <Row>

          {
            this.Fields.map((group, i) => (

              <Column key={`${group.name}_i`} col="12" className="mt-4 mb-2 form-fields-wrap">
                <h5 className="form-section-title">{group.label}</h5>
                <Row>
                  
                  {
                    Start.renderFieldsGroup(group.fields, group.name, this.props.preview)
                  }
                </Row>
              </Column>

            ))
          }
        </Row>
      </Column>
    )
  }

  appendInput() {
    console.log("11111")
    var newInput = `input-${this.state.inputs.length}`;
    this.setState(prevState => ({ inputs: prevState.inputs.concat([newInput]) }));
}

 render()
  {
    const self = this
    return(
      <div>

          <div id="dynamicInput">
            {console.log("this.state.input ", this.state.input)}
              {this.state.inputs.map(input => this.tryFunction())}
          </div>

      <button onClick={ () => this.appendInput() }>
          CLICK ME TO ADD AN INPUT
      </button>
   </div>
);
  }

Answer 1

You call this.Fields.map() in your edit but as far as i can tell you dont actually declare Fields . I made an example how i would solve such a situation, you should be able to use the same technique for your situation.

export default class MyClass extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            dynamicItems: []
        };
    }

    handleClick(){
        //Add a new item component to state.dynamicItems
        this.setState(prevState => ({
            dynamicItems: [...prevState.dynamicItems, <Item text="text" key="key" />]
        }));
    }
    
    render(){
        return(
            <div className="page">
                <div className="dynamic-container">
                    {/*Render item components*/}
                    {this.state.dynamicItems.map((item) => {return item})}
                </div>

                <button onclick={() => this.handleClick()}>Add Item</button>
            </div>
        );
    }
}

//Item component
class Item extends React.Component{
    render(){
        return(
            <div className="item" key={this.props.key}>
                <p>{this.props.text}</p>
            </div>
        );
    }
}