react实现点击按钮添加一项(开始显示一项默认的) 点击每项按钮添加对应的小项

我是用三个组件实现的：
组件A： 添加按钮

①首先在组件A中设置一个对象数组add:[{name:[]}]        this.state={ add:[{name:[]}] };②写一个新增方法的按钮，并绑定一个点击事件

<Button onClick={this.add()}>新增方法</Button>

③写add（）方法

//增加一项
add =() =>{
this.state.add.push({name:[]}) //向数组中增加对象以实现新增一项的目的
Emiter.emit("addContainer",{"addContainerItem":this.state.add})//向组件B传值
}

组件B：添加的大项
①写一个对象数组用于接收组件A传来的值this.state={ ContainerItem:[{name:[]}] }②写一个接收组件A值的方法

<SubEmiter eventName="addContainer" listener={this.onAddContainer}/>

onAddContainer =(param) =>{
this.setState({ContainerItem:param.addContainerItem})
}

③遍历这个对象数组来呈现页面中有多少项

this.state.ContainerItem && this.state.ContainerItem.map((item,i)=>{
return(
<Content key={i}>
<div className="header">
访问路径：<Input placeholder="请输入访问路径"/>
返回类型：<Select defaultValue="post" onChange={this.handleChange}>
<Option value="get">GET</Option>
<Option value="post">POST</Option>
</Select>
方法名称：<Input placeholder="请输入方法名称"/>
请求类型：<Select defaultValue="get" onChange={this.handleChange}>
<Option value="get">GET</Option>
<Option value="post">POST</Option>
</Select>
{/* 点击增加其中每一小项*/}
 <a onClick={()=>this.add(i)}><img className="add" src={require('../../assets/images/new_service/新增.png')}/></a>
<a onClick={()=>this.del(i)}><img className="del" src={require('../../assets/images/new_service/删除.png')}/></a>
</div>

{/* 组件C*/}

 <Item info={item.name}/> </Content>)})

④写add方法实现点击每项的添加按钮添加一小项

add =(value) =>{
if(value==0){
this.state.ContainerItem[0].name.push({string:"aaa"});
Emiter.emit("add0",{"item":this.state.ContainerItem[value].name})

}else{
this.state.ContainerItem[value].name.push({string:"aaa"});

Emiter.emit("add",{"item":this.state.ContainerItem[value].name})
}

}

注：因为开始页面中呈现一项默认的，所以要把它和其他项区分开，若直接执行else里的语句会出现点击第二项的添加时第一项已添加的项全部清空

⑤当value=0 时，组件A 中接收参数然后再传到组件B让ContainerItem重新渲染，接收的方法为：onAddItem =(param)=>{
const arr=this.state.ContainerItem
arr[0].name=param.item
this.setState({ContainerItem:arr})
Emiter.emit("add",{"item":this.state.ContainerItem[0].name})
}
组件C：大项里对应的小项
①在state里面定义一个数组用来表示每一项里有多少小项this.state={ arr:[] };

②有一个方法用来接收组件B传来的参数
<SubEmiter eventName="add" listener={this.onAdd}/>

onAdd =(param) =>{
this.setState({arr:this.props.info})
}

③遍历arr[ ]从而在页面中展示大项中包含的小项

this.state.arr && this.state.arr.map((item,i)=>{
return(
<div className="container" key={i}>
参数名称：<Input placeholder="请输入参数名称"/>
<a className="hint" onClick={this.out}><img src={require('../../assets/images/new_service/提示-拷贝.png')}/></a>
参数类型：<Select defaultValue="post" onChange={this.handleChange}>
<Option value="get">GET</Option>
<Option value="post">POST</Option>
</Select>
<a onClick={()=>this.del(i)}><img src={require('../../assets/images/new_service/叉叉.png')}/></a>
</div>
)
})

到此。。。就完成啦！至于删除就是从数组中删除一项啦。。。

我是用的delete 删除的