Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)
该控件的属性以及属性的作用在ADP的官方文档中都有介绍，但没有讲如何与后端交互，本文旨在讲解该控件与后端的交互。
Ant Design官方文档
先来看需求是怎样的，以及实现的效果
需求：管理某个场馆中的活动，可以对这个场馆进行加入活动和移出活动。
如图，初始进入到这个页面后，韵苑体育馆中有两个活动：活动1、活动5，其余活动在右边的框中(不属于该场馆)。选中右边框中的活动，可以进行移入操作。选中左边的活动，可以进行移出活动。
第一步：从后端取数据
(1)首先，我在该model(namesapce为themeList)的state中定义了两个数据
activitys: {
list: [],
},
emptyActivitys: {
list: [],
}
activitys是上图中属于左边框的活动，即场馆中的活动。emptyActivitys是上图中右边框的活动，即不属于该场馆中的活动。这两个集合没有交集。
(2)接下来就是该页面在加载的时候从后端取数据并放到这两个属性中，这里需要熟悉Ant Design Pro框架的用法以及React交互原理，就不再这里进行赘述了。
第二步：引进该控件
方便起见，我在使用这个控件时没有做代码规范，直接在该页面的代码上添加了该控件代码。
@connect(({ themeList, loading }) => ({
themeList,
submitting: loading.effects[ hemeList/],
}))
class App extends ponent {
handleChange = targetKeys => {
const {
themeList: { emptyActivitys },
} = this.props; //从model中取出emptyActivitys
const { dispatch, themeList } = this.props;
var addList = []; // 需要添加到当前场馆的活动
var removeList = []; // 需要移出当前场馆的活动
