Question

在我看来，我有从数据库中提取的表单字段

<select id="part_id_01", name="part_id_01">
    <option value="1">top</option>
    <option value="2">middle</option>
    <option value="3">bottom</option>
    <option value="4">none</option>
</select>

<input type="text" id="part_color_01" name="part_color_01">

我将在页面上有一个按钮，单击该按钮时，它将添加另一对这些字段，并在名称和ID上添加一个增量编号。我不想每次都通过数据库获取字段，因为它们只是固定数据，因此我只想复制页面上已有的内容并粘贴它。如何在React中复制？

Answer 1

class Div extends Component {
constructor(props){
  super(props);
  this.setState({
    array:[]
  })
  this.manangeDiv = this.manangeDiv.bind(this);
}
manangeDiv(e,type){
  let array = this.state.array;
  if (type=='add') {
    //this line will duplicate the object of array and push it in to same array
    array.push(array[0]);
  }
  else if(type=='remove') {
    array.splice(0,1);
  }
  this.setState({
    array
  })
}
render(){
  return(
    <div>
      {/* Add button will increase array length by one, and Remove button will decrease array length by one */}
      <button onClick={(e)=>this.manangeDiv(e,'add')}> add </button>  <button onClick={(e)=>this.manangeDiv(e,'remove')}> remove </button>
      {
        //this map funtion will create dynamic loop on the basis of array length
        this.state.array.map((item,index)=>{
          return(
            <div key={index}> Dynamic Div </div>
          );
        })
      }
    </div>
  );
}
}

这是解决这个问题的最简单方法。创建一个空数组并将第一个数据对象分配到其中，之后创建添加删除按钮和按钮调用检查是否单击了添加按钮或删除按钮。如果添加按钮单击只需按下数组中的相同对象并拼接它以便删除按钮单击。在渲染零件地图数组和地图的回报中定义你的div将根据你的数组长度动态创建div，因此，你可以在点击按钮上添加和删除div。

如何在Reactjs中复制页面上的内容？

1 个答案: