我有一个包含三个输入元素和一个删除按钮的div。需要的是，当用户单击添加按钮时，它将动态添加此div，而当用户单击删除按钮时，它将删除此div。我可以使用以下方法动态添加一个输入元素（没有div容器）。

• 在状态变量中创建一个数组。
• 借助数组索引（如name0、name1）为动态输入字段指定名称

如何处理这么多的输入字段呢？当我将整个div作为一个单独的组件创建时，问题就更严重了。我使用的是基于类的组件。

handleChange=(event) =>
  {
    this.setState({[event.target.name]:event.target.values});
  }

render()
  {
    return(
      <div className="row">
        <button type="button" onClick={this.addElement}>Add</button>
        <div className="col-md-12 form-group">
          <input type="text" className="form-control" name="name" value={this.state.name} onChange={this.handleChange} />
          <input type="text" className="form-control" name="email" value={this.state.email} onChange={this.handleChange} />
          <input type="text" className="form-control" name="phone" value={this.state.phone} onChange={this.state.phone} />
          <button type="button" onClick={this.removeElement}>Remove</button>
        </div> 
      </div>
    )
  }