按钮单击时添加div标签

Question

在按钮点击后，我想在div标签（id = item）下面渲染。如果我点击按钮两次，应该渲染两个div标签（id = item）。我可以在React js中做到吗？

 <div id="item">        
      <div class="form-group">
        <label class="col-lg-3 control-label">Item name:</label>
        <div class="col-lg-8">
        <input class="form-control" type="text" value="Rice n Curry"/>
        </div>
      </div>

      <div class="form-group">
      <label class="col-lg-3 control-label">Price (Rs):</label>
        <div class="col-lg-8">
        <input class="form-control" type="text" value="150.00"/>
        </div>
        </div>

          <div class="form-group">
            <label class="col-lg-3 control-label">Available Quantity:</label>
        <div class="col-lg-8">
        <input class="form-control" type="text" value="10"/>
        </div>
        </div>


        <div class="form-group">
        <label class="col-lg-3 control-label">Item image:</label>
        <div class="col-lg-8">
        <input type="file" class="form-control"/>
        </div>
      </div>


            <div class="form-group">
            <label class="col-md-3 control-label"></label>            
            <button type="button" class="btn btn-success btn-sm">
            <span class="glyphicon glyphicon-trash"></span> Delete this item
             </button> 
            </div>
    </div>

Answer 1

class App extends React.Component {
  state = {
    arrayOfDivs: []
  };
  createDiv = () => {
    let { arrayOfDivs } = this.state;
    arrayOfDivs = arrayOfDivs.concat([<div> Hello </div>]);
    this.setState({ arrayOfDivs });
  };
  render() {
    const { arrayOfDivs } = this.state;
    return (
      <div>
        <h1> Generate Div On Click </h1>
        <button onClick={this.createDiv}> Generate </button>
        <div>
          {arrayOfDivs.length ? arrayOfDivs.map(item => item) : "empty array"}
        </div>
      </div>
    );
  }
}

创建一个函数，将div推送到数组并在render方法中映射数组并显示每个div。