单击按钮时添加 div 标签答案

【问题标题】：Adding a div tag when button clicks单击按钮时添加 div 标签
【发布时间】：2018-10-21 16:20:10
【问题描述】：

我想在单击按钮后呈现在 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>

【问题讨论】：

标签： reactjs

【解决方案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。

【讨论】：