ant Design穿梭框Transfer采坑笔记

2021-09-06 00:01:19 阅读：803 来源： 互联网

标签：采坑 title Transfer list nextTargetKeys ant key targetKeys onChange

最近有个需求需要使用穿梭框功能，看着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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ant Design穿梭框Transfer采坑笔记

以下是我实现的功能

dataSource数据源：