Question

我正在制作一份员工表格，其中教育细节是表格的一部分。教育细节将包含一系列字段，如学位名称，毕业年份，大学名称等。现在我们要求我们将加（+）和减去（ - ）按钮以添加和删除更多教育字段。那么，我们如何在 reactJs 中实现这种动态添加和删除一组教育详细信息字段。

Answer 1

在父状态中设置fieldCount或其他内容。像这样：

constructor(props){
   super(props);
   this.addHandler = this.addHandler.bind(this);
   this.removeHandler = this.removeHandler.bind(this);
}

addHandler(event){
  this.setState({fieldCount: this.state.fieldCount + 1})
}

removeHandler(event){
  this.setState({fieldCount: Math.min(this.state.fieldCount - 1, 1)})
}

render(){
   var childs= [];

   for (var i = 0; i < this.state.fieldCount; i++) {
      childs.push(<ChildComponent />);
   }


  return(
     <div>
          {childs}
          <button onClick={this.addHandler}>Add</button>
          <button onClick={this.removeHandler}>Remove</button>
      </div>
  )

}

如何在单击reactjs时多次在组件内显示组件

1 个答案: