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

页面效果图：

数据操作分析：

在查询表组件的 TableData.js 中操作如下内容：

给每一行绑定一个checkBox，且在点击这个 checkBox 时，触发 action 中的一个方法(formatPostCollectionList)，这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法，需要export

定义每一行的实体为一个数组，用变量 postCollections 表示

如果选中当前行，则更新实体数组中的数据；如果取消当前行，则删除实体中的数据；

参数为 row ；

点击删除按钮后，使用 componentDitUpdate() 生命周期方法，在组件更新后调用。

如果删除成功，则执行 action 中的方法 clearPostCollection()。这个方法是用来清空当前行实体中的数据；

如果删除成功，最后执行 查询表的刷新重新加载数据的方法

更新实体数据与清空实体数据的方法，在 action 中执行。

代码分析：

表查询操作

1、调查询接口，Api中的方法

rush:js;"> searchPostCollectionByActivityId(activityId,callback) { const queryParam = `/tob/post/search?activeId=${activityId}`; //接口，使用``可以在URL中显示查询参数 Config.get(queryParam,callback); }

2、action中操作查询数据的方法 postCollectionEntityList 存放接口中的所有数据

<div class="jb51code">
<pre class="brush:js;">
export function initPostCollection(row){
return (dispatch,getState) => {
let activityId = row.activityId;
Api.searchPostCollectionByActivityId(activityId,params => {
dispatch(initPostCollectionSetter(activityId,params));
});
}
}
function initPostCollectionSetter(activityId,params){
return {
type:INIT_POST_COLLECTION,activityId:activityId,data:{postCollectionEntityList:params}
}
}