ant Design穿梭框Transfer采坑笔记

最近有个需求需要使用穿梭框功能，看着antd都有现成组件，就毫不犹豫开发起来，结果采坑绕了一大圈才实现了想要的业务逻辑。

先来看看官方的demo：

官网链接直达：https://ant.design/components/transfer-cn/

根据官方的基本用法，代码如下：

    <Transfer
      dataSource={mockData}
      titles={['Source', 'Target']}
      targetKeys={targetKeys}
      selectedKeys={selectedKeys}
      onChange={onChange}
      onSelectChange={onSelectChange}
      onScroll={onScroll}
      render={item => item.title}
    />

• dataSource:代表所有数据
• targetKeys：代表选中数据的key值
• render：代表每行的渲染函数
• onChange onSelectChange onScroll：代表各类回调函数

这里要着重强调下，不要以为Transfer左右两边的数据是分别查询的，他们的数据都是通过维护一个dataSource实现的。系统默认左边为未选择的数据，右边为选择的数据，选择的数据通过targetKeys来实现。targetKeys是一个数组，选择的数据先后顺序跟这个targetKeys数据的先后顺序有关。

之前以为两边的处理是分开的，所以给每个数据加了if_select的属性来做选择状态的判断，后面试了下targetKeys，居然把我想要实现的选择，排序等功能都实现了，才恍然大悟。

const onChange = (nextTargetKeys, direction, moveKeys) => {
    console.log('nextTargetKeys', nextTargetKeys, direction, moveKeys);
    // const list = _.cloneDeep(channel_list);
    if (direction === 'left') {
      // for (let i = 0; i < list.length; i += 1) {
      //   if (!nextTargetKeys.includes(list[i].key)) {
      //     list[i].if_select = false;
      //   }
      // }
      setTargetKeys(nextTargetKeys);
    } else if (direction === 'right') {
      // for (let i = 0; i < list.length; i += 1) {
      //   if (nextTargetKeys.includes(list[i].key)) {
      //     list[i].if_select = true;
      //   }
      // }
      setTargetKeys([...target_keys, nextTargetKeys[0]]);
    }
    // setChannelList([...list]);
  };

以下是我实现的功能

dataSource数据源：

const res = [
      {
        key: '00',
        title: '我的关注',
        description: '我的关注',
      },
      {
        key: '11',
        title: '推荐',
        description: '推荐',
      },
      {
        key: '22',
        title: '游戏',
        description: '游戏',
      },
      {
        key: '33',
        title: '少儿',
        description: '少儿',
      },
    ];

来看看效果

实现这样的效果，只需对targetKeys这样设置就行

targetKeys = ["11","22"] 

标签：采坑,title,Transfer,list,nextTargetKeys,ant,key,targetKeys,onChange
来源： https://blog.csdn.net/ssza02/article/details/120123934