react.js的批量添加与删除功能

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

结构分析：

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

添加按钮的事件

被添加组件存放的容器

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

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

在添加组件的容器<p className="pBorder"></p>中，为添加按钮写的 批量添加 addContent() 与删除removeContent()

代码分析：

添加组件存放的容器<p className="pBorder">

<p className="pBorder">
   {addToBtn} //添加按钮
   {items}   //被添加的组件
</p>

.pBorder {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 5%;
  border: 1px solid #e3e3e3;
  padding: 30px 10px;
  margin-bottom: 5%;

  -moz-position: relative;
  -moz-width: 100%;
  -moz-height: auto;
  -moz-border: 1px solid #e3e3e3;
  -moz-padding: 30px 10px;
  -moz-margin-bottom: 5%;
  -webkit-position: relative;
  -webkit-width: 100%;
  -webkit-height: auto;
  -webkit-border: 1px solid #e3e3e3;
  -webkit-padding: 30px 10px;
  -webkit-margin-bottom: 5%;
}

被添加的组件：UploadQiNiuFiles 与 删除组件的方法 deleteType()

七牛上传组件，巳作介绍，在制作这个组件时，需要用到action的方法与reducers中的state，请参考这个链接。因为橙色字体中的参数的获取是需要用到action中的方法

在p为pBorder的容器内操作添加事件

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

批量上传文件的组件名称，我定义为：UploadFileToFolde

默认参数为：

数据渲染完成之后，需要执行componentDidUpdate()，这是state中所有的数据：

this.props.meetingState.addUploadFolderToFileList; 判断这里面的数据是否为空或是undefined。如果这个state有值且新增成功，则下次到这个页面时清空所有的数据并且点击保存按钮时返回到原来的页面。clearInvitation() 的方法是清空所有的业务数据，它的方法写在action中，data是业务数据，根据实际情况写：

七牛上传组件中 有个 deleteType() 的删除方法，它调的就是 removeContent() 方法，缺一不可，需要注意，我把这个deleteType（）方法代码也放在这里：

以上就是react.js 的 批量添加与删除功能的详细内容，更多请关注Gxl网其它相关文章！