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

/*获取上个页面传过来的值 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 之 批量添加与删除功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: