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

结构分析：

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

添加按钮的事件

被添加组件存放的容器

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

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

//删除{qiniu}与{deleteQiNiu}内容，是把页面上的这两个内容一起删除
  deleteType(){
    let index = this.props.index;
    this.props.callbackParent(index);
  }

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

//批量添加
  addContent(event) {
    if (this.state.number.length >= this.state.maxNum) {
      return;
    }
    console.log("this.state.number:" + this.state.number);
    this.state.number.push(this.state.number[this.state.number.length - 1] + 1);
    let temp = this.state.number;
    this.setState({
      number: temp
    })
  }

  //删除
  removeContent(index) {
    if (this.state.number.length <= 1) {
      return;
    }
    this.state.number.splice(index, 1);
    this.setState({
      number: this.state.number
    })
  }

代码分析：

添加组件存放的容器<div className="divBorder">

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

.divBorder {
  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()

/**
 * Created by wf on 2016/5/16.
 */
import React,{Component} from 'react';
import {render} from 'react-dom';
import ReactBootstrap , {Input,Button,ButtonToolbar} from 'react-bootstrap';
import style from '../../../../css/meeting_data.css';

//七牛上传公共组件
import QiniuUpload from 'qiniu_uploader';

export default class UploadQiNiuFiles extends Component {
  constructor(props){
    super(props);
  }

  //获取qiniukey
  getQiniuKey(qiniuKey){
    this.props.setQiniuKey(qiniuKey);
  }

  //获取qiniutoken
  getQiniuUptoken() {
    this.props.acquireToken();
  };

  //删除{qiniu}与{deleteQiNiu}内容，是把页面上的这两个内容一起删除，直接绑定要删除的组件
  //这个方法调用的是removeContent()，在下面有介绍
  deleteType(){
    let index = this.props.index;
    this.props.callbackParent(index);
  }

  render(){

    const qiniu = (
      <div className="col-md-8 qiNiuBtn">
        <QiniuUpload containerId="containerId" pickfilesId="pickfilesId" qiniuToken={this.props.meetingState.token} callback={this.getQiniuKey.bind(this)} getQiniuUptoken={this.getQiniuUptoken.bind(this)} />
      </div>
    );

    const deleteQiNiu = (
      <div className="col-md-4">
        <Button bsStyle="danger" className="deleteQiniu" onClick={this.deleteType.bind(this)}>删除</Button>
      </div>

    );

    return(
      <div>
        <div className="uploadBox">
          {qiniu}
          {deleteQiNiu}
        </div>
      </div>
    );
  }
}

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

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

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

/**常用组件路径简写为：
  *
  * 例：config: path.join(__dirname,"./build/config.js")
  * config 变量名
  * path.join(__dirname,"./build/config.js") config的路径
  *
  * 使用方法： import {变量} from 'config'
  * //七牛上传公共组件
   import QiniuUpload from 'qiniu_uploader';
  * **/
 resolve: {
  alias: {
   qiniu_uploader: path.join(__dirname,"./public_component/qiniu_upload/QiniuUpload.js"),
   storage: path.join(__dirname,"./utils/Storage.js"),
   config: path.join(__dirname,"./build/config.js")
  }
 }

import React,{Component} from 'react';
import {render} from 'react-dom';
import ReactBootstrap , {Input,Button,ButtonToolbar} from 'react-bootstrap';
import { Link } from 'react-router';
//
import UploadQiNiuFiles from './UploadQiNiuFiles.js';

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

默认参数为：

constructor(props){
    super(props);
    this.state = {number: [1], maxNum: 10} //最大数据为10条，默认显示1条
  }

/*获取上个页面传过来的值 let local = this.props.location;
   如果从（row,query）中跳转过来的页面，从query中传值过来要这么写：let query = local.query;
   如果这个页面是包含在某个大的页面下的，要把query与对应的ID传过去
   */
  componentDidMount(){
    let local = this.props.location;
    let query = local.query;
    this.props.setActivityId(query.activityId);
  }

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

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

/* 清空*/

export const CLEAR_INVITATION = 'CLEAR_INVITATION';
 export function clearInvitation(){
  return {
    type: CLEAR_INVITATION,
    data:{
      addInvitationResponse:{},
      Invitations:[],
      deleteInvitationsResponse:{},
      invitationName:'',
      folderName: ''
    }
  }
}

componentDidUpdate(){
    let addFileToFolderList = this.props.meetingState.addUploadFolderToFileList;
    if (typeof(addFileToFolderList) != 'undefined') {
      let status = addFileToFolderList.status;
      if (200 == status) {
        //如果新增成功，则下次添加前清空所有
        this.props.clearInvitation();
        //点击保存按钮，返回原来的页面
        this.props.history.goBack();
      }
    }
  }

//批量添加，直接拿来使用
  addContent(event) {
    if (this.state.number.length >= this.state.maxNum) {
      return;
    }
    console.log("this.state.number:" + this.state.number);
    this.state.number.push(this.state.number[this.state.number.length - 1] + 1);
    let temp = this.state.number;
    this.setState({
      number: temp
    })
  }

//删除，直接拿来使用
  removeContent(index) {
    if (this.state.number.length <= 1) {
      return;
    }
    this.state.number.splice(index, 1);
    this.setState({
      number: this.state.number
    })
  }

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

//绑定被删除的组件，直接拿来使用
  deleteType(){
    let index = this.props.index;
    this.props.callbackParent(index); //调用removeContent()方法
  }

render(){
　　   //将要添加的组件定义为变量为一个数组 items
    let items = [];
　　   //从添加的组件数量中遍历，
    for(let i = 0; i < this.state.number.length; i++){
    //给这个items推送组件
      items.push(<UploadQiNiuFiles index={i}
                    callbackParent={this.removeContent.bind(this)}
                    key={this.state.number[i]} {...this.props} />)
    }

    
    const addToBtn = (
      <Button bsStyle="primary" onClick={this.addContent.bind(this)}>添加</Button>
    );return (
      <div>
        <div>
          <div className="divTitle">添加文件</div>
          <div className="divBorder">
            {addToBtn}
            {items}
          </div>
        </div></div>
    );
  }

以上这篇浅谈react.js 之 批量添加与删除功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# react  # 添加删除  # 基于React实现表单数据的添加和删除详解  # React实现点击删除列表中对应项  # ReactJs快速入门教程(精华版)  # 上传  # 清空  # 绑定  # 这两个  # 给大家  # 的是  # 这是  # 下次  # 加载  # 放在  # 有个  # 遍历  # 它是  # 我把  # 要把  # 希望能  # 只需要  # 实际情况  # 跳转  # 这篇 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  Laravel如何实现模型的全局作用域？（Global Scope示例）  如何在IIS中新建站点并配置端口与IP地址？  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  如何在服务器上三步完成建站并提升流量？  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  Python进程池调度策略_任务分发说明【指导】  微信h5制作网站有哪些,免费微信H5页面制作工具？  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  网站建设整体流程解析，建站其实很容易！  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  免费网站制作appp,免费制作app哪个平台好？  PythonWeb开发入门教程_Flask快速构建Web应用  济南网站建设制作公司,室内设计网站一般都有哪些功能？  网站建设保证美观性，需要考虑的几点问题！  创业网站制作流程,创业网站可靠吗？  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  昵图网官网入口 昵图网素材平台官方入口  如何获取PHP WAP自助建站系统源码？  Python数据仓库与ETL构建实战_Airflow调度流程详解  Laravel如何使用Gate和Policy进行授权？（权限控制）  简历在线制作网站免费版,如何创建个人简历？  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  青岛网站建设如何选择本地服务器？  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  如何正确下载安装西数主机建站助手？  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  网站制作壁纸教程视频,电脑壁纸网站？  Laravel模型事件有哪些_Laravel Model Event生命周期详解  如何快速重置建站主机并恢复默认配置？  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  Laravel如何使用查询构建器？（Query Builder高级用法）  太平洋网站制作公司,网络用语太平洋是什么意思？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  如何实现javascript表单验证_正则表达式有哪些实用技巧  如何用JavaScript实现文本编辑器_光标和选区怎么处理  浅谈redis在项目中的应用  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  详解Android——蓝牙技术 带你实现终端间数据传输  浅析上传头像示例及其注意事项  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置