antd 穿梭框的用法

效果如图

使用：

	const [mockData, setMockData] = React.useState([]);
    const [targetKeys, setTargetKeys] = React.useState([]);
const searchData = () =>{
    QueryCache().then(res=>{
        console.log(res);
        const userArray = res;
        const userlist = userArray.map((item, index) => {
          //return { ...item, key: index }
          return {
              key : item.id.toString(),
              title:item.metric
          }
        });
        const arr = context.dataQuery.agentMonitorTemplateItemVoList;
         const arrQuery = [];
        userlist.map(item=>{
            arr.map(i=>{
                if(item.title==i.metric){
                    arrQuery.push(item.key);
                }
            })
        })
        console.log(arrQuery,"右边选中的");
        setTargetKeys(arrQuery);
        setMockData(userlist);
        
    }).catch(err=>{

    })
}

调用

  <Transfer
                    titles={['未选', '已选']}
                    style={{maxWidth:'600px',display:'none'}}
                    dataSource={mockData}
                    targetKeys={targetKeys}
                    onChange={onChange}
                    render={item => item.title}
                    oneWay={oneWay}
                    pagination
                />