最近做的羧甲基淀粉钠需要用到批量添加图片的功能：在添加文件的容器盒子内，有两个内容，分别是：添加按钮与被添加的选择文件组件。

结构分析：

被添加的组件，我们称为：UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮

添加按钮的事件

被添加组件存放的容器

做这个效果只需要明白三个方法的用途就好的：

直接绑定要删除组件的deleteType()，它是调用删除指数数量的方法removeContent()

//删除秦牛与{deleteQiNiu}内容，是把页面上的这两个内容一起删除delete TYPe(){让索引=this。道具。指数；这个。道具。callbackparent(索引)；}在添加组件的容器div NAmE=' DivBorder '/div中，为添加按钮写的批量添加添加内容()与删除removeContent()

//批量添加addContent(event){ if(this。国家。号码。长度=这个。国家。MaxNum){ return；}控制台。日志(' this。国家。这个号码是：国家。数量)；这个。国家。号码。推(这个。国家。数字[这个。国家。号码。长度-1]1)；让temp=这个。国家。数量；这个。setstate({ number : temp })}//删除移除内容(索引){ if(this。国家。号码。长度=1){ return；} this.state.number.splice(索引，1);这个。SetState({ number : this。国家。number })}代码分析：

添加组件存放的容器差异类名='divBorder '

差异类名='divBorder' {addToBtn} //添加按钮{items} //被添加的组件/div。div边框{位置：相对；宽度： 100%;height: auto利润率-前：名5%；border: 1px固体# e3e 3；padding: 30px 10px保证金-底部： 5%;蚊子相对位置：-moz-宽度： 100%；-moz-height : auto；-moz-border: 1px固体# e3e3 e 3-moz-padd : 30px 10px；蚊子利润率-底部： 5%;-网络套件-相对位置：-web套件-宽度： 100%；-web套件-height : auto；-webkit-border: 1px固体# e3e3e3-web套件-padd : 30px 10px；-WebKit-保证金-底部： 5%；}被添加的组件：上传文件与删除组件的方法deleteType()

/** *由滤水器(Water Filter)于2016年5月16日创建。*/从“反应”导入反应，{组件}；从“反应世界”导入{ render }；从"反应引导"导入反应引导、{输入、按钮、按钮工具栏};从""导入样式././././CSS/meeting _ data。CSS '；//七牛上传公共组件从" qiniu_uploader "导入奇牛上传器；导出默认类上传文件扩展组件{构造函数（道具){ super(道具)};} //获取qiniuKey getQiniuKey(qiniuKey){ this。道具。setqiniukey(qiniuKey)；} //获取qinutoken getqinuuptoken(){ this。道具。获取令牌()；};//删除秦牛与{deleteQiNiu}内容，是把页面上的这两个内容一起删除，直接绑定要删除的组件//这个方法调用的是removeContent()，在下面有介绍delete TYPe(){让索引=this。道具。指数；这个。道具。callbackparent(索引)；} render(){ const qiniu=(div类名=' col-MD-8 qiNiuBtn ' qiniubload containerId=' containerId ' pick fileid=' pick fileid ' qiniubtoken={ this。道具。会议状态。令牌}回调={这个。getqiniubkey。bind(this)} getqiniubtoken={ this。getqiniubtoken。bind(this)}//div)；const deleteQiNiu=(div类名=' col-MD-4 ' Button bsStyle=' danger '类名=' deleteQiNiu ' onClick={ this。deletetype。绑定(此)删除/Button/div)；return(div div类名=' uploadBox ' { qiniu } { deleteQiNiu }/div/div)；}}七牛上传组件，巳作介绍，在制作这个组件时，需要用到行为的方法与还原剂中的国家，请参考这个链接。因为橙色字体中的参数的获取是需要用到行为中的方法

在差异为divBorder的容器内操作添加事件

首先要加载，七牛上传组件：上传文件，它的加载路径为webpack中的方法：

/**常用组件路径简写为： * * 例：config: path.join(__dirname，' ./build/config.js') * config变量名* path.join(__dirname，' ./build/config.js)配置的路径* * 使用方法：导入{变量}来自"配置"* //七牛上传公共组件从" qiniu_uploader "导入奇牛上传器；* * */解析： {别名： { qiniu _ uploader : }路径。join(__dirname，' ./public _ component/qiniu _ upload/qiniu upload。js ')，存储路径：join(_ _ dirname，' ./utils/Storage.js ')，config: path.join(__dirname ' ./build/config。js ')} }从“反应”导入反应，{组件}；从“反应世界”导入{ render }；从"反应引导"导入反应引导、{输入、按钮、按钮工具栏};从"反应路由器"导入{链接};//从导入上传文件/uploadqiniufiles。js '；批量上传文件的组件名称，我定义为：上传文件文件夹

默认参数为：

建造师（道具){ super(道具);this.state={number: [1]，maxNum: 10} //最大数据为10条，默认显示一条}/*获取上个页面传过来的值让local=这个。道具。位置；如果从（行，查询)中跳转过来的页面，从询问中传值过来要这么写：让query=local.query如果这个页面是包含在某个大的页面下的，要把询问与对应的身份传过去*/componentDidMount(){让local=this。道具。位置；让query=local.querythis。道具。setactivityid(查询。activity id)；}数据渲染完成之后，需要执行componentDidUpdate()，这是状态中所有的数据：

这个。道具。会议状态。adduploadfoldertofilelist判断这里面的数据是否为空或是未定义。如果这个状态有值且新增成功，则下次到这个页面时清空所有的数据并且点击保存按钮时返回到原来的页面clearInvitation()的方法是清空所有的业务数据，它的方法写在行为中，数据是业务数据，根据实际情况写：

/* 清空*/export const CLEAR _ INVITE=' CLEAR _ INVITE '；导出函数CLEAR invision(){ return { type : CLEAR _ invision，data : { addinvalist response : } }，invite :[]，deleteInvitationsResponse: { }，invitments : ' '，foldername : ' ' } } } component date(){ let addfiletofolderist=this。道具。会议状态。adduploadfoldertofilelistif(类型为(addfiletofolderist)！=' undefined '){ let status=addfiletofolderist。地位；if (200==状态){ //如果新增成功，则下次添加前清空所有这个。道具。clear invite()；//点击保存按钮，返回原来的页面这个。道具。历史。go back()；} } }//批量添加，直接拿来使用addContent(event){ if(this。国家。号码。长度=这个。国家。MaxNum){ return；}控制台。日志(' this。国家。这个号码是：国家。数量)；这个。国家。号码。推(这个。国家。数字[这个。国家。号码。长度-1]1)；让temp=这个。国家。数量；这个。setstate({ number : temp })}//删除，直接拿来使用移除内容(索引){ if(this。国家。号码。长度=1){ return；} this.state.number.splice(索引，1);这个。SetState({ number : this。国家。number })}七牛上传组件中有个deleteType()的删除方法，它调的就是removeContent()方法，缺一不可，需要注意，我把这个deleteType()方法代码也放在这里：

//绑定被删除的组件，直接拿来使用delete TYPe(){让索引=this。道具。指数；这个。道具。callbackparent(索引)；//调用removeContent()方法}render(){ //将要添加的组件定义为变量为一个数组items let items=[]；//从添加的组件数量中遍历，用于(设I=0；我喜欢这个。国家。号码。长度；i ){ //给这个项目推送组件物品。推送(uploadqiniuffiles)索引={ I } callbackParent={ this。移除内容。绑定(此)键={这个。国家。数字[I]} { 0.这个。props }/)} const addToBtn=(Button bsStyle=' primary ' OnClick={ this。添加内容。绑定(此)添加/Button)；return(div class name=' div title '添加文件/div div类名=' div边框' { addToBtn } { items }/div/div/div)；}以上这篇浅谈react.js之批量添加与删除功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。