render里面的布局
{
this.state.externalContact.map((item,i)=>{
return(
<Row className="gutter-row" key={i}>
<Col span={20} offset={4} className="gutter-col">
<div>
<Row>
<Col span={5}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'name')}/></Col>
<Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'phone')}/></Col>
<Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'QQ')}/></Col>
<Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'email')}/></Col>
<Col span={1}><div style={{width:'100%',height:'32px',lineHeight:'32px',textAlign:'center'}} onClick={()=>this.delExternalContact(i)}><DeleteFilled /></div></Col>
</Row>
</div>
</Col>
</Row>
)
})
}
<Row>
<Col offset={4} className="gutter-col"><div style={{cursor:'pointer'}} onClick={this.addExternalContact}><PlusOutlined/><span>增加对外联系人</span></div></Col>
</Row>
state里的数据
this.state={
externalContact:[],
listA:[],
}
方法
addExternalContact = ()=>{
this.state.listA.push({name:'', phone:'', QQ:'', email:''})
this.setState({
externalContact:this.state.listA
})
}
changeExternalContactValue(i,value,inputName){
this.state.listA[i][inputName] = value
this.setState({
externalContact:this.state.listA
},()=>{console.log(this.state.externalContact)})
}
delExternalContact(index){
let lists = this.state.externalContact;
lists.splice(index,1);
this.setState({externalContact:lists},()=>{console.log(this.state.externalContact)})
}