react.js CMS 删除功能的实现方法(2)

export const DELETE_POST_COLLECTIONS = 'DELETE_POST_COLLECTIONS'; export function deletePostCollections(){ //点击删除按钮后，触发deletePostCollections删除方法 return(dispatch, getState) => { let state = getState().postCollectionState; let activityId = state.activityId; let postCollections = state.postCollections; //实体对象从state中获取 Api.deletePostCollections(activityId ,postCollections, params => { //调删除接口的方法 dispatch(deletePostCollectionsSetter(params)); }); } } function deletePostCollectionsSetter(params){ alertPre("",params); return { type:DELETE_POST_COLLECTIONS, data:{deletePostCollectionsResponse:params} //deletePostCollectionsResponse 选中的要删除的数据容器 } }

把删除数据的方法绑定到删除按钮，绑定前根据删除钮钮的状态，判断是否可点击

render(){ let dis = true; //删除按钮状态，默认为禁用状态，返回为true let postCollections = this.props.postCollectionState.postCollections; //获取实体中的数据 if (typeof(postCollections) == 'undefined' || postCollections.length == 0) { //如果实体中的数据为 undefined 或者 为空 dis = true; //如果实体中没有数据，则按钮状态为禁用状态 } else { dis = false; //如果实体中有数据，选中后的状态为可点击状态 } const buttonsInstanceDel = ( <ButtonToolbar className="mb10"> <Button bsStyle="danger" disabled={dis} onClick={this.props.deletePostCollections}>删除贴子集</Button> //红色字体标为 删除数据的方法 </ButtonToolbar> ); return( <div> {buttonsInstanceDel} </div> ) }

删除成功后，调用生命周期的方法，在 表查询组件中，更新表数据。如果删除成功，则执行两个方法：清空实体数据与刷新加载数据

componentDidUpdate () { let deletePostCollectionsResponse = this.props.postCollectionState.deletePostCollectionsResponse; //deletePostCollectionsResponse 删除的数据 if (typeof(deletePostCollectionsResponse) != 'undefined') { //如果这个数据类型不是 undefined let status = deletePostCollectionsResponse.status; //获取到这个删除的数据状态 if (200 == status) { //如果为200，删除成功 this.props.clearPostCollection(); //加载清空实体数据的方法 clearPostCollection，就是从实体数据中删除被删除的数据 let param = { activityId:this.props.postCollectionState.activityId } this.props.initPostCollection(param); //根据ID重新加载剩余的数据 } } }

清空实体

export const CLEAR_POST_COLLECTION = 'CLEAR_POST_COLLECTION'; export function clearPostCollection(){ return { type: CLEAR_POST_COLLECTION, data:{ //实体中的数据名称 addPostCollectionResponse:{}, postCollections:[], deletePostCollectionsResponse:{}, postCollectionName:'', postNumber:'0', postFieldList:[] } } }

所有代码结构，含一个api，一个action，两个component，一个reducers

api(查询 / 删除)

//查询 searchPostCollectionByActivityId(activityId, callback) { const queryParam = `/tob/post/search?activeId=${activityId}`; Config.get(queryParam, callback); } //删除 deletePostCollections (activityId ,params, callback) { let path = `/tob/post/deletePostCollection/${activityId}`; Config.deleteWithNoResponse(path ,params, callback); }

action(查询方法 / 更新选中实体数据方法 / 删除方法 / 清空实体数据方法 )