Javascript 反应：动态添加字段

我有一个类，当用户单击“添加按钮”时，我应该动态添加字段；如果用户单击“删除按钮”，我应该删除字段

导出默认类myClass扩展组件
{
建造师（道具）{
超级（道具）；
}
字段=[
{
名称：“$ClassName”，
字段：[
{
名称：'ClassName.FirstField'，
列：[“lg-6”、“md-6”、“sm-12”]，
要求：正确，
标签：“第一个字段”
}
]
},
]
render（）
{
const self=this
返回(
{
this.Fields.map（（组，i）=>(
{group.label}
{
Start.renderFieldsGroup（group.fields、group.name、this.props.preview）
}
))
}
)
}

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

如何动态添加此字段

编辑：

导出默认类myClass扩展组件
{
建造师（道具）{
超级（道具）；
this.state={inputs:['input-0']}；
}
tryFunction（）{
const self=this
返回(
{
this.Fields.map（（组，i）=>(
{group.label}
{
Start.renderFieldsGroup（group.fields、group.name、this.props.preview）
}
))
}
)
}
appendInput（）{
控制台日志（“11111”）
var newInput=`input-${this.state.inputs.length}`；
this.setState（prevState=>（{inputs:prevState.inputs.concat（[newInput]）}））；
}
render（）
{
const self=this
返回(
{console.log（“this.state.input”，this.state.input）}
{this.state.inputs.map（输入=>this.tryFunction（））}
this.appendInput（）}>
单击我添加输入
);
}

您可以在编辑中调用

this.Fields.map（）

，但据我所知，您实际上并没有声明

字段。

。我举了一个例子，说明如何解决这种情况，您应该能够对您的情况使用相同的技术

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

导出默认类MyClass扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
动态项：[]
};
}
handleClick（）{
//将新项组件添加到state.dynamicItems
this.setState（prevState=>({
dynamicItems:[…prevState.dynamicItems，]
}));
}
render（）{
返回(
{/*呈现项组件*/}
{this.state.dynamicItems.map（（项）=>{return item}）}
this.handleClick（）}>添加项
);
}
}
//项目组成
类项扩展了React.Component{
render（）{
返回(
{this.props.text}

);
}
}

您应该使用state和调用setState的处理程序将数据动态添加到数组中。然后，您可以将此处理程序作为触发此数据添加的任何事件的事件处理程序传递。希望这对你有所帮助谢谢你的回答，我试过用这种方法（编辑消息），但不起作用下面的答案应该是你想要的。祝你好运

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

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