通过本文主要向大家介绍了react.js菜鸟教程,react.js项目,react.js,react.js中文官网,react.js下载等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
最近做的CMS需要用到批量添加图片的功能：在添加文件的容器盒子内，有两个内容，分别是：添加按钮与被添加的选择文件组件。
结构分析：
被添加的组件，我们称为：UploadQiNiuFiles(七牛文件上传组件)，含一个删除当前组件的删除按钮
添加按钮的事件
被添加组件存放的容器
做这个效果只需要明白三个方法的用途就OK：
直接绑定要删除组件的 deleteType()，它是调用删除index数量的方法 removeContent()
//删除{qiniu}与{deleteQiNiu}内容，是把页面上的这两个内容一起删除
deleteType(){
let index = this.props.index;
this.props.callbackParent(index);
}
</div>
在添加组件的容器<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>
代码分析：
添加组件存放的容器<div className="divBorder">
<div className="divBorder">
{addToBtn} //添加按钮
{items} //被添加的组件
</div>
</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%;
}
</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(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>
);
}
}
</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")
}
}
</div>
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';
</div>
批量上传文件的组件名称，我定义为：UploadFileToFolde
默认参数为：
constructor(props){
super(props);
this.state = {number: [1], maxNum: 10} //最大数据为10条，默认显示1条
}
</div>
/*获取上个页面传过来的值 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);
}
</div>
数据渲染完成之后，需要执行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: ''
}
}
}
</div>
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();
}
}
}
</div>
//批量添加，直接拿来使用
addContent(event) {
if (this.state.number.length >= this.state.maxNum) {
return;
}
consol