React：动态添加字段

Question

我有一个 class ，当用户单击“添加按钮”时我应该在其中动态添加字段，或者如果用户单击“删除按钮”则删除字段。

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>
    )
  }

现在，当用户单击添加按钮（或删除按钮）时，我应该创建添加（和删除）字段数组的可能性。

我该怎么做才能动态添加这个字段？

编辑：

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

您在编辑中调用this.Fields.map()但据我所知，您实际上并未声明Fields 。 我举了一个例子，我将如何解决这种情况，你应该能够对你的情况使用相同的技术。

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>
        );
    }
}