浅谈react.js 之 批量添加与删除功能


Posted in Javascript onApril 17, 2017

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

浅谈react.js 之 批量添加与删除功能

结构分析:

被添加的组件,我们称为: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 之 批量添加与删除功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
js实现的折叠导航示例
Nov 29 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 #Javascript
老生常谈jacascript DOM节点获取
Apr 17 #Javascript
老生常谈combobox和combotree模糊查询
Apr 17 #Javascript
vue实现简单表格组件实例详解
Apr 16 #Javascript
JavaScript实现网页头部进度条刷新
Apr 16 #Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
You might like
php分页函数完整实例代码
2014/09/22 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
php命令行写shell实例详解
2018/07/19 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python基础教程之字典操作详解
2014/03/25 Python
python机器学习实战之树回归详解
2017/12/20 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
房地产销售计划书
2014/01/10 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
法制宣传口号
2014/06/16 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
分居协议书范本
2014/11/03 职场文书
情人节活动总结范文
2015/02/05 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers