全国咨询热线:18720358503

拼团小程序哪个好用_浅谈react.js 之 批量添加与删

类别:企业动态 发布时间:2021-01-12 浏览人次:

浅谈react.js 之 批量添加与删除功能     投稿:jingxian   下面小编就为大家带来一篇浅谈react.js 之 批量添加与删除功能。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

结构分析:

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

添加按钮的事件

被添加组件存放的容器

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

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

//删除{qiniu}与{deleteQiNiu}内容,是把页面上的这两个内容一起删除
 deleteType(){
 let index = this.pro凡科抠图.index;
 this.pro凡科抠图.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 

被添加的组件: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(pro凡科抠图){
 super(pro凡科抠图);
 //获取qiniukey
 getQiniuKey(qiniuKey){
 this.pro凡科抠图.setQiniuKey(qiniuKey);
 //获取qiniutoken
 getQiniuUptoken() {
 this.pro凡科抠图.acquireToken();
 //删除{qiniu}与{deleteQiNiu}内容,是把页面上的这两个内容一起删除,直接绑定要删除的组件
 //这个方法调用的是removeContent(),在下面有介绍
 deleteType(){
 let index = this.pro凡科抠图.index;
 this.pro凡科抠图.callbackParent(index);
 render(){
 const qiniu = (
 div className="col-md-8 qiNiuBtn" 
 QiniuUpload containerId="containerId" pickfilesId="pickfilesId" qiniuToken={this.pro凡科抠图.meetingState.token} callback={this.getQiniuKey.bind(this)} getQiniuUptoken={this.getQiniuUptoken.bind(this)} / 
 /div 
 const deleteQiNiu = (
 div className="col-md-4" 
 Button bs className="deleteQiniu" 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,"./ponent/qiniu_upload/QiniuUpload.js"),
 storage: path.join(__dirname,"./utils/Storage.js"),
 config: path.join(__dirname,"./build/config.js")
 }

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(pro凡科抠图){
 super(pro凡科抠图);
 this.state = {number: [1], maxNum: 10} //最大数据为10条,默认显示1条
 }

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

ponentDidUpdate(),这是state中所有的数据:

this.pro凡科抠图.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.pro凡科抠图.meetingState.addUploadFolderToFileList; if (typeof(addFileToFolderList) != 'undefined') { let status = addFileToFolderList.status; if (200 == status) { //如果新增成功,则下次添加前清空所有 this.pro凡科抠图.clearInvitation(); //点击保存按钮,返回原来的页面 this.pro凡科抠图.history.goBack(); }
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 }

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

//绑定被删除的组件,直接拿来使用
 deleteType(){
 let index = this.pro凡科抠图.index;
 this.pro凡科抠图.callbackParent(index); //调用removeContent()方法
 }

callbackParent={this.removeContent.bind(this)} key={this.state.number[i]} {...this.pro凡科抠图} / )

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


下一篇:没有了

推荐阅读

拼团小程序哪个好用_浅谈react.js 之 批量添加与删

探讨react.js 之 大批量加上与删掉作用 文章投稿:jingxian 下边网编就为大伙儿产生一篇探讨react.js 之 大批量加上与删掉作用。网编感觉挺好的,如今就共享给大伙儿,也给大伙儿做...

2021-01-12
小程序游戏模板_JS完成禁止高频率接连点击的方

JS完成严禁高频率率持续点一下的方式【根据ES6英语的语法】 本文关键详细介绍了JS完成严禁高频率率持续点一下的方式,根据恶性事件监视融合定时执行器完成对于高频率率点一下...

2021-01-12
郑州微信小程序开发_jQuery查找dom的几种方法功率

jQuery搜索dom的几类方式高效率详细说明 本文关键纪录了在最近开发设计中碰到的jQuery dom基本搜索方式,随后将各种各样方式特性干了一个较为,目地是期待自身在之后dom原素搜索...

2021-01-12
网站数据库的安全设计问题

伴随着互连网的髙速发展趋势,门户网网站和各种各样 技术专业网站如雨后春笋快速发展趋势创建起來,根据需有的精准定位,为众多客户出示各种各样信息内容及其电子器件商务接...

2021-01-12
广州凡科互联网科技股份有限公司招聘销售经理

招聘人数:13职位信息岗位职责:1、要相关互联网同行销售和管理工作经验。2、负责管理销售团队,完成每个月公司下达的销售目标3、根据公司的销售战略、规划和制定销售策略,编制...

2021-01-12
一个小企业网站获得免费友情链接方法推荐

我是一个公司网站的网络管理员,这个公司人很少,大约所有算在一起不超出50人吧,算作小型公司,但是这个公司老板很有气魄,像个干大事儿的人,观念新潮,很期待从互连在网上给...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信