我现在有个使用场景:
在使用七牛的图片上传组件在上传一张图片,拿后这张图片的七牛key;点击“新增”按钮,新增一组七牛的图片上传组件,使用新增的这个组件再上传另一张图片,并拿到这张图片的七牛key?
因为第二次新增的是相同的组件,我在使用新增的组件上传图片时,会把第一次上传的七牛key替换掉,怎么解决?
批量新增的方法:
//批量添加
addContent(e){
if(this.state.number.length >= this.state.maxNum){
return;
}
this.state.number.push(this.state.number[this.state.number.length -1] + 1);
let temp = this.state.number;
this.setState({
number: temp
});
}
ImgList2 为七牛上传的组件
callback 为回调七牛key的方法
let IOSItems2 = [];
for(let i = 0; i < this.state.number.length; i++){
IOSItems2.push(<ImgList2 index={i} callback={this.props.callback.bind(this)} key={this.state.number[i]} {...this.props} />)
}
点击【增加】按钮,新增七牛组件:
<button className="btn btn-primary" onClick={this.addContent.bind(this)} >增加</button>
比较丑的图片,但是能看出是怎么新增的:
学习是最好的投资!